前端开发

用css把超出部分的文字显示成省略号

2017-03-27  本文已影响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代码来实现,容易了很多有没有
上一篇 下一篇

猜你喜欢

热点阅读