美文网首页前端开发
用css把超出部分的文字显示成省略号

用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