隐藏多余内容，使用...代替。CSS 样式从前往后加载，需要有逻辑性

原创于 2018-09-13 16:27:21 发布 · 361 阅读

0 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

3 篇文章

订阅专栏

本文深入探讨了CSS样式加载过程中的顺序问题，解释了为何正确的样式加载顺序对样式生效至关重要。文章通过具体示例说明了当overflow属性置于height属性之前可能导致的样式失效问题，强调了理解样式加载顺序对于避免布局问题的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题：设置样式时，样式的内容都正确时而没有效果？

解决：查看样式的先后顺序。因为样式的加载时从前往后的（优先级高的先加载，同优先级从前往后。）

如果将overflow属性放在height之前，会使overflow属性失效，由于在从前往后加载时，如果先加载overflow而没有height时，是无法实现隐藏的，因为没有高度而控制高度是不存在的。

<div style="width: 150px;
height: 25px;display: inline-block">
    <div style="width: 150px;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 1;  //这里是在第二行有省略号
                 height: 25px;
                 overflow: hidden;">${orgChannel.channelName}</div></div>