成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

AlienZHOU / 2100人閱讀

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

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

原理：兩個(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è)開(kāi)發(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ì)那么正好合適，如果有更合理的方式，歡迎留言解答。如下圖所示：

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

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

相關(guān)文章

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

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

    laznrbfe 評(píng)論0 收藏0

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

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

    xbynet 評(píng)論0 收藏0

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

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

    Bamboy 評(píng)論0 收藏0

  • CSS開(kāi)發(fā)

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

    warkiz 評(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 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<