在实际的Web开发当中,经常需要将溢出容器边界的文本显示为省略号,其实这非常简单,设置几个CSS属性就可以达到效果,并且兼容各大浏览器,包括PC端和移动端。
1、容器必须固定宽度,单位可以是像素或百分比;
2、禁止容器内的文本换行;
3、将溢出的内容隐藏掉;
4、将溢出的内容替换为省略号。
只要记住以上四个步骤就很容易想起代码了,我自己就是这样去记的。
示例代码:
.test{ width:100px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
时间: 2024-10-12 16:50:34