CSS设置文字超出部分显示省略号

 

.text-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 200px;  // 根据实际需要调整
}

这样，当文本内容超出元素宽度时，浏览器就会显示为省略号。

这种方法的工作原理如下：

• white-space: nowrap; 阻止文本自动进入下一行
• overflow: hidden; 隐藏超出元素宽度的文本
• text-overflow: ellipsis; 指示浏览器将文本溢出部分显示为省略号

需要注意的是，这种方法只能用于单行文本。 如果你需要用于多行文本，可以考虑使用一些JS库或者CSS的"-webkit-line-clamp"属性，但这是非标准的属性，需要注意浏览器的兼容性。

.text-ellipsis-multi {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; /* number of lines to show */
    overflow: hidden;
}