CSS處理文本過(guò)長(zhǎng)或超出部分（解說(shuō)二）

xbynet 發(fā)布于2019-08-02 15:18 / 748人閱讀

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

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

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

        .a{
            width: 300px;
            /*想要顯示幾行，高度就是行高*倍數(shù)*/
            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;/* 省略號(hào)寬度 */
            margin-left: -1em;/* 使省略號(hào)在文字的最末端 */
            position: relative;
            top: 26px;
            left: 100%;
            background-color: #fff;
        }
        .b{
            float: right;
            margin-left: -5px;
            width: 100%;
            line-height: 26px;
            word-break: break-all;
        }


    在網(wǎng)頁(yè)開發(fā)中，經(jīng)常會(huì)遇到文本超出了限定的范圍，尤其是屏幕尺寸的大小導(dǎo)致的，著實(shí)影響美觀，
這個(gè)時(shí)候，就需要用css對(duì)其進(jìn)行處理。下面的方法是我在實(shí)際工作中總結(jié)出來(lái)的，給大家參考一下。

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

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

GPU云服務(wù)器云服務(wù)器 html超出部分滾動(dòng) 隱藏超出文本鼠標(biāo)選中文本或得 css文本框

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/54037.html

相關(guān)文章

CSS處理文本過(guò)長(zhǎng)或超出部分（解說(shuō)二）

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

laznrbfe 2019-08-30 11:12 評(píng)論0 收藏0
CSS處理文本過(guò)長(zhǎng)或超出部分（解說(shuō)二）

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

AlienZHOU 2019-08-23 18:07 評(píng)論0 收藏0
CSS處理文本過(guò)長(zhǎng)或超出部分（解說(shuō)一）

摘要：在網(wǎng)頁(yè)開發(fā)中，經(jīng)常會(huì)遇到文本超出了限定的范圍，尤其是屏幕尺寸的大小導(dǎo)致的，著實(shí)影響美觀，這個(gè)時(shí)候，就需要用對(duì)其進(jìn)行處理。再補(bǔ)充一條，比如想讓內(nèi)容在第二行的時(shí)候，超出部分隱藏這個(gè)處理方式的目前只兼容內(nèi)核的瀏覽器其他方法見解說(shuō)二在網(wǎng)頁(yè)開發(fā)中，經(jīng)常會(huì)遇到文本超出了限定的范圍，尤其是屏幕尺寸的大小導(dǎo)致的，著實(shí)影響美觀，這個(gè)時(shí)候，就需要用css對(duì)其進(jìn)行處理。下面的方法是我在實(shí)際工作中總結(jié)...

Bamboy 2019-08-29 12:49 評(píng)論0 收藏0
CSS開發(fā)

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

warkiz 2019-08-30 13:54 評(píng)論0 收藏0
white-space、word-wrap和word-break的簡(jiǎn)單整理

摘要：理解和的區(qū)別從易于區(qū)分和理解的角度，我引用了無(wú)雙在你真的了解和的區(qū)別嗎一文中對(duì)兩個(gè)屬性作用的解釋屬性用來(lái)標(biāo)明是否允許瀏覽器在單詞內(nèi)進(jìn)行斷句，這是為了防止當(dāng)一個(gè)字符串太長(zhǎng)而找不到它的自然斷句點(diǎn)時(shí)產(chǎn)生溢出現(xiàn)象。 white-space 、 word-wrap 和 word-break 是決定段落中的文本如何展示的3個(gè)css屬性，屬性說(shuō)明請(qǐng)點(diǎn)擊鏈接查看參考手冊(cè)。 white-space wh...

Magicer 2019-08-30 15:52 評(píng)論0 收藏0