[分享]css内容超出显示省略号

CSS是前端开发中必不可少的一门技术，通过CSS可以对网站页面的样式进行调整。在实际开发中，可能会遇到内容过长的情况，这时候我们可以使用超出显示省略号的方式来解决。.ellipsis { whites...

CSS是前端开发中必不可少的一门技术，通过CSS可以对网站页面的样式进行调整。在实际开发中，可能会遇到内容过长的情况，这时候我们可以使用超出显示省略号的方式来解决。

.ellipsis {
    white-space: nowrap; /* 不换行 */
    overflow: hidden; /* 隐藏内容 */
    text-overflow: ellipsis; /* 显示省略号 */
} 

上面的代码使用了text-overflow属性来实现省略号的显示。该属性指定当文本溢出包含块时，应该如何处理。默认值是clip，表示裁剪文本，而我们需要用到的是text-overflow: ellipsis，表示在文本开头、结尾或中间使用省略号来代替溢出的部分。

我们还可以结合max-width属性来实现在一定宽度下的省略号显示效果：

.ellipsis {
    display: inline-block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 200px; /* 指定最大宽度 */
} 

以上代码中指定了最大宽度为200px，在内容超出该宽度时会出现省略号。