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

laznrbfe 發布于2019-08-30 11:12 / 1398人閱讀

摘要：原理兩個盒子，文字內容放于盒子，固定盒子的高度及行高，超出的內容隱藏，在結尾處放置省略號，如下圖，紅線圈出部分用省略號覆蓋。

解說一中的方法不兼容火狐、IE瀏覽器，所以解說二會給出通用的css寫法。

原理：兩個盒子a、b，文字內容放于盒子b，固定盒子a的高度及行高，超出a的內容隱藏，在結尾處放置省略號，如下圖，紅線圈出部分用省略號覆蓋。

        .a{
            width: 300px;
            /*想要顯示幾行，高度就是行高*倍數*/
            height: 52px;
            line-height: 26px;
            overflow: hidden;
            border: 1px solid #ffffd;
        }
        .a::before{
            float: left;
            width: 5px;
            content: "";
        }
        .a::after{
            height: 26px;
            content: "...";
            line-height: 26px;
            width: 3em;/* 省略號寬度 */
            margin-left: -1em;/* 使省略號在文字的最末端 */
            position: relative;
            top: 26px;
            left: 100%;
            background-color: #fff;
        }
        .b{
            float: right;
            margin-left: -5px;
            width: 100%;
            line-height: 26px;
            word-break: break-all;
        }


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

超出盒子a的內容都被隱藏掉了，在第二行結尾處，用‘...’覆蓋了其他的文字，效果如下圖所示：

這個方法存在的問題是：使用的文字的格式，內容的不同，有可能放置的省略號的位置可能不會那么正好合適，如果有更合理的方式，歡迎留言解答。如下圖所示：

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

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/114840.html

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
CSS處理文本過長或超出部分（解說一）

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

Bamboy 2019-08-29 12:49 評論0 收藏0
CSS開發

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

warkiz 2019-08-30 13:54 評論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