（转）CSS处理文本过长或超出部分

不念不忘少年蓝@ 2022-05-21 09:23 342阅读 0赞

原帖：https://segmentfault.com/a/1190000009873744

在网页开发中，经常会遇到文本超出了限定的范围，尤其是屏幕尺寸的大小导致的，着实影响美观，这个时候，就需要用css对其进行处理。

下面的方法是我在实际工作中总结出来的，给大家参考一下。

（1）用省略号代替超出的部分，这个就是高度、宽度都受到限制的时候适用（是我比较喜欢的一种）

text-overflow:clip 修剪文本|ellipsis 显示省略符号来代表被修剪的文本|string 使用给定的字符串来代表被修剪的文本。
    
    .content {
            width: 80%;
            height: 40px;
            padding: 5px;
            **overflow: hidden;
            white-space:nowrap; /*文本不换行*/
            text-overflow: ellipsis;**
        }

需要将三者结合使用，达到想要的效果：  
![省略号代替超出部分][bVPArk_w_257_h_74]

（2）超出部分换行，在单词过长，高度不受限制时适用  
![单词过长][bVPAqv_w_256_h_166]

word-break: normal 默认的|break-all 在单词内换行|keep-all 只能在半角空格或连字符处换行;
    
    p {
        width: 160px;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 4px;
        **word-break: break-all;**
    }

![单词过长，换行处理][bVPArE_w_209_h_160]

（3）由于绝对定位或者其他情况，导致的标题盖住链接的，可以采用flex布局  
![绝对定位的链接被标题盖住][bVPAv7_w_489_h_194]

.word-secondli {
            display: flex;
            flex-wrap: wrap;/*换行，第一行在上*/
            justify-content: space-between;/*两端对齐，项目间隔相等*/
            align-items: center;/*居中对齐*/
            border-bottom: 1px solid #ccc;
        }
    
    <div class="word-secondli">
        <h3>在网页开发中，经常会碰到在一些场景</h3>
        <a href="#">click me</a>
    </div>

这样，标题过长的没地儿放下链接的时候，链接会自动换行。  
![链接换行][bVPAQK_w_380_h_78]

以上就是我能想到的方法，如果有什么不足的地方，欢迎指教。

再补充一条，比如想让内容在第二行的时候，超出部分隐藏：
    
                {
                width: 100%;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
                display: -webkit-inline-box;
                }

[bVPArk_w_257_h_74]: /images/20220521/7e78539945b1447ebda9b47cdba85a66.png
[bVPAqv_w_256_h_166]: /images/20220521/ffea86f87c7347319eff1f1e02c8f014.png
[bVPArE_w_209_h_160]: /images/20220521/fccccbe6e4144c439d7119d8b76b7cfe.png
[bVPAv7_w_489_h_194]: /images/20220521/5d5ee821fd94426fad6d95de92ab3f42.png
[bVPAQK_w_380_h_78]: /images/20220521/29654c2f1f2442568f75ae8d2de46b18.png