[分享]css内容溢出省略号代替

CSS中的内容溢出省略号代替可以很好地解决文本超出容器大小的问题。当文本内容过长时，容器会自动隐藏多余的部分，用省略号代替。实现这个效果需要设置一个CSS属性：textoverflow: ellips...

CSS中的内容溢出省略号代替可以很好地解决文本超出容器大小的问题。当文本内容过长时，容器会自动隐藏多余的部分，用省略号代替。

实现这个效果需要设置一个CSS属性：text-overflow: ellipsis。

 .box {
        width: 200px;
        height: 100px;
        overflow: hidden;
        white-space: nowrap;  //禁止文本换行
        text-overflow: ellipsis;  //用省略号代替超出的部分
    } 

这里设置了一个宽200px，高100px的容器。当文本超过容器范围时，会通过overflow: hidden属性隐藏多余的部分。同时，设置white-space: nowrap防止文本自动换行。

最后，在文本内容超过容器大小时，使用text-overflow: ellipsis代替超出的部分，展示省略号。

实现内容溢出省略号代替的效果，可以在很多场合下使用。例如在新闻标题过长时，可以用省略号代替，让页面更加美观。另外，在移动端设备上，屏幕空间有限，使用内容溢出省略号代替也可以让页面更加简洁易读。