css3 超出省略

CSS3可以通过超出省略来避免长文本在布局中引起的问题。超出省略指当文本内容超出其容器宽度时，将其省略为省略号，而不是自动换行。

使用超出省略时，需要设置以下CSS属性：

.ellipsis {
    white-space: nowrap;
     /* 禁止文本自动换行 */overflow: hidden;
     /* 隐藏超出容器部分的文本 */text-overflow: ellipsis;
 /* 用省略号代表被省略的文本 */}
    

在上面的代码中，white-space属性设置为nowrap，可以使文本在遇到容器边缘时，不会自动换行。当文本内容超出容器宽度时，overflow属性设置为hidden可以隐藏超出容器部分的文本。最后，text-overflow属性设置为ellipsis即可用省略号代替被省略的文本。

我们可以在任何块级元素中应用上面的CSS属性来实现超出省略，例如：

div class="ellipsis">
    这是一个超出省略的示例文本/div>
    

运行上述代码后，文本将在超出容器边缘时自动省略为省略号。

需要注意的是，超出省略仅适用于单行文本。如果要在多行文本中应用超出省略，可以使用CSS3中的display: box或display: flex属性，或者使用JavaScript等其他技术。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！