用css把超出部分的文字显示成省略号
作者:
抛荒了四序 | 来源:发表于
2017-03-27 23:19 被阅读56次大家一定遇到过这种情况,先把超出元素范围的文本信息内容用省略号代替,之前一直是用js去实现,偶尔发现了用css 也能实现同样的效果
html部分:
随便写一个用来装文本的容器标签
<p>老司机就是我,我就是老司机~~~!!!</p>
css部分:
样式代码如下
p{
width: 105px;
border: 1px solid black;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
其中 white-space: nowrap;表示文本内容不换行,
text-overflow: ellipsis;表示超出容器部分的文本用省略号代替,
其他的相信大家都认识啦,别忘了要设置容器元素的宽度和overflow: hidden;属性,才会生效啊~~,相比js代码来实现,容易了很多有没有
本文标题:用css把超出部分的文字显示成省略号
本文链接:https://www.haomeiwen.com/subject/oajdottx.html
网友评论