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

資訊專(zhuān)欄INFORMATION COLUMN

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

Bamboy / 1750人閱讀

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

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

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

text-overflow:clip 修剪文本|ellipsis 顯示省略符號(hào)來(lái)代表被修剪的文本|string 使用給定的字符串來(lái)代表被修剪的文本。

.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;  /*規(guī)定段落中的文本不進(jìn)行換行*/**
    }

需要將三者結(jié)合使用，達(dá)到想要的效果：

（2）超出部分換行，在單詞過(guò)長(zhǎng)，高度不受限制時(shí)適用

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

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

（3）由于絕對(duì)定位或者其他情況，導(dǎo)致的標(biāo)題蓋住鏈接的，可以采用flex布局

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



    
在網(wǎng)頁(yè)開(kāi)發(fā)中，經(jīng)常會(huì)碰到在一些場(chǎng)景

    click me

這樣，標(biāo)題過(guò)長(zhǎng)的沒(méi)地兒放下鏈接的時(shí)候，鏈接會(huì)自動(dòng)換行。

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

再補(bǔ)充一條，比如想讓內(nèi)容在第二行的時(shí)候，超出部分隱藏：

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

這個(gè)處理方式的目前只兼容webkit內(nèi)核的瀏覽器（其他方法見(jiàn)解說(shuō)二）：

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

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

相關(guān)文章

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

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

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

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

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

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

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

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

    AlienZHOU 評(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

  • 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

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

0條評(píng)論

閱讀需要支付1元查看
<