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

大家一定遇到过这种情况,先把超出元素范围的文本信息内容用省略号代替,之前一直是用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代码来实现,容易了很多有没有}