CSS處理文本過長或超出部分（解說一）

Bamboy 發布于2019-08-29 12:49 / 1988人閱讀

摘要：在網頁開發中，經常會遇到文本超出了限定的范圍，尤其是屏幕尺寸的大小導致的，著實影響美觀，這個時候，就需要用對其進行處理。再補充一條，比如想讓內容在第二行的時候，超出部分隱藏這個處理方式的目前只兼容內核的瀏覽器其他方法見解說二

在網頁開發中，經常會遇到文本超出了限定的范圍，尤其是屏幕尺寸的大小導致的，著實影響美觀，這個時候，就需要用css對其進行處理。
下面的方法是我在實際工作中總結出來的，給大家參考一下。

2018-9-11 by yl
這是在實際應用中遇到的一個新的需求，就是指定文本行數，如果超出就用省略號代替
.content{  /*設置文本為多行，如果超出長度用省略號代替*/
            width: 200px;
            word-break: break-all;
            display: -webkit-box;
            -webkit-line-clamp: 2;  /*限制在一個塊元素顯示的文本的行數*/
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

（1）用省略號代替超出的部分，這個就是高度、寬度都受到限制的時候適用（是我比較喜歡的一種）

text-overflow:clip 修剪文本|ellipsis 顯示省略符號來代表被修剪的文本|string 使用給定的字符串來代表被修剪的文本。

.content {
        width: 80%;
        height: 40px;
        padding: 5px;
        **overflow: hidden;
          text-overflow: ellipsis;
          -o-text-overflow: ellipsis;
          -webkit-text-overflow: ellipsis;
          -moz-text-overflow: ellipsis;
          white-space: nowrap;  /*規定段落中的文本不進行換行*/**
    }

需要將三者結合使用，達到想要的效果：

（2）超出部分換行，在單詞過長，高度不受限制時適用

word-break: normal 默認的|break-all 在單詞內換行|keep-all 只能在半角空格或連字符處換行;

p {
    width: 160px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    **word-break: break-all;**
}

（3）由于絕對定位或者其他情況，導致的標題蓋住鏈接的，可以采用flex布局

.word-secondli {
        display: flex;
        flex-wrap: wrap;/*換行，第一行在上*/
        justify-content: space-between;/*兩端對齊，項目間隔相等*/
        align-items: center;/*居中對齊*/
        border-bottom: 1px solid #ccc;
    }


    在網頁開發中，經常會碰到在一些場景
    click me

這樣，標題過長的沒地兒放下鏈接的時候，鏈接會自動換行。

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

再補充一條，比如想讓內容在第二行的時候，超出部分隱藏：

            {
            width: 100%;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            display: -webkit-inline-box;
            }

這個處理方式的目前只兼容webkit內核的瀏覽器（其他方法見解說二）：

GPU云服務器云服務器 html超出部分滾動隱藏超出文本鼠標選中文本或得 css文本框

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.hztianpu.com/yun/112164.html

CSS處理文本過長或超出部分（解說二）

摘要：原理兩個盒子，文字內容放于盒子，固定盒子的高度及行高，超出的內容隱藏，在結尾處放置省略號，如下圖，紅線圈出部分用省略號覆蓋。解說一中的方法不兼容火狐、IE瀏覽器，所以解說二會給出通用的css寫法。原理：兩個盒子a、b，文字內容放于盒子b，固定盒子a的高度及行高，超出a的內容隱藏，在結尾處放置省略號，如下圖，紅線圈出部分用省略號覆蓋。showImg(https://segmentfa...

laznrbfe 2019-08-30 11:12 評論0 收藏0
CSS處理文本過長或超出部分（解說二）

摘要：原理兩個盒子，文字內容放于盒子，固定盒子的高度及行高，超出的內容隱藏，在結尾處放置省略號，如下圖，紅線圈出部分用省略號覆蓋。解說一中的方法不兼容火狐、IE瀏覽器，所以解說二會給出通用的css寫法。原理：兩個盒子a、b，文字內容放于盒子b，固定盒子a的高度及行高，超出a的內容隱藏，在結尾處放置省略號，如下圖，紅線圈出部分用省略號覆蓋。showImg(https://segmentfa...

xbynet 2019-08-02 15:18 評論0 收藏0
CSS處理文本過長或超出部分（解說二）

摘要：原理兩個盒子，文字內容放于盒子，固定盒子的高度及行高，超出的內容隱藏，在結尾處放置省略號，如下圖，紅線圈出部分用省略號覆蓋。解說一中的方法不兼容火狐、IE瀏覽器，所以解說二會給出通用的css寫法。原理：兩個盒子a、b，文字內容放于盒子b，固定盒子a的高度及行高，超出a的內容隱藏，在結尾處放置省略號，如下圖，紅線圈出部分用省略號覆蓋。showImg(https://segmentfa...

AlienZHOU 2019-08-23 18:07 評論0 收藏0
white-space、word-wrap和word-break的簡單整理

摘要：理解和的區別從易于區分和理解的角度，我引用了無雙在你真的了解和的區別嗎一文中對兩個屬性作用的解釋屬性用來標明是否允許瀏覽器在單詞內進行斷句，這是為了防止當一個字符串太長而找不到它的自然斷句點時產生溢出現象。 white-space 、 word-wrap 和 word-break 是決定段落中的文本如何展示的3個css屬性，屬性說明請點擊鏈接查看參考手冊。 white-space wh...

Magicer 2019-08-30 15:52 評論0 收藏0
CSS開發

摘要：譯十六進制顏色揭秘原文地址原文作者譯文出自掘金翻譯計劃本文永久鏈接教程入門篇關于是一款進行柵格布局的輔助工具，它讓開發者擺脫了冗雜的數學計算，同時降低了樣式與結構的耦合程度。【譯】CSS 十六進制顏色揭秘原文地址：CSS Hex Colors Demystified 原文作者：Dave Gash 譯文出自：掘金翻譯計劃本文永久鏈接：https://github.com/xitu/...

warkiz 2019-08-30 13:54 評論0 收藏0