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

資訊專欄INFORMATION COLUMN

文本多行溢出顯示...之最后一行不到行尾的解決

YPHP / 2747人閱讀

摘要:多行文本溢出,但是最后一行木有到結(jié)尾,如下圖這種例子解決代碼示例元素的格式化首行可能會(huì)存在于相同流下的塊級(jí)子元素上元素的格式化首行可能會(huì)存在于相同流下的塊級(jí)子元素上。

多行文本溢出,但是最后一行木有到結(jié)尾,如下圖這種例子

解決代碼示例
html:

    

元素的“格式化首行”可能會(huì)存在于相同流下的塊級(jí)子元素上元素的“格式化首行”可能會(huì)存在于相同流下的塊級(jí)子元素上。元素的“格式化首行”可能會(huì)存在于相同流下的塊級(jí)子元素上元素的“格式化首行”可能會(huì)存在于相同流下的塊級(jí)子元素上元素的“格式化首行”可能會(huì)存在于相同流下的塊級(jí)子元素上。元素的“格式化首行”可能會(huì)存在于相同流下的塊級(jí)子元素上元素的“格式化首行”可能會(huì)存在于相同流下的塊級(jí)子元素上元素的“格式化首行”可能會(huì)存在于相同流下的塊級(jí)子元素上元素的“格式化首行”可能會(huì)存在于相同流下的塊級(jí)子元素上能會(huì)存在于相同流下的塊級(jí)子元素上。元素的“格式化首行”可能會(huì)存在于相同流下的塊級(jí)子元素上元素的“格式化首行”可能會(huì)存在于相同流下的塊級(jí)子元素上元素的“格式化首行”可能會(huì)存在于相同流下的塊級(jí)子元素上元素的“格式化首行”可能會(huì)存在于相同流下的塊級(jí)子元素上

...更多詳情

css:

        * {
            margin: 0;
            padding: 0;
        }

        .model_content {
            padding: 0 30px;
            position: relative;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }

        .model_text {
            font-size: 14px;
            color: #657180;
            text-align: justify;
            line-height: 24px;
        }

        .model_detail {
            width: 5em;
            position: absolute;
            right: 30px;
            bottom: 0;
            background: #fff;
            font-size: 14px;
            color: #657180;
        }

        .more_detail {
            position: absolute;
            right: 0;
            color: #4876f1;
            margin-left: 5px;
        }
    

效果:

總結(jié):

將...拼在后面,寬度以em(基于父元素font-size)為單位,相當(dāng)于遮住底下的文字內(nèi)容而模擬這種效果,以em為單位的目的是防止遮住字不是整數(shù)個(gè),希望以整字倍數(shù)為寬。

還有其他方法么?

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

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

相關(guān)文章

  • flex基礎(chǔ)布局詳解

    摘要:系統(tǒng)性的介紹關(guān)于布局,也作為自學(xué)的一篇文章基礎(chǔ)理念使用彈性盒子的意義是在任何尺寸的屏幕上改變其和其子元素的尺寸填充屏幕可用空間。屬性一個(gè)布局的頁面所具有的元素可分為類。每行第一個(gè)元素與行首對(duì)齊,每行最后一個(gè)元素與行尾對(duì)齊。 flex-tutorials 系統(tǒng)性的介紹關(guān)于flex布局,也作為自學(xué)的一篇文章 flex基礎(chǔ)理念 使用彈性盒子的意義是在任何尺寸的屏幕上改變其和其子元素的尺寸填充...

    nemo 評(píng)論0 收藏0
  • flex基礎(chǔ)布局詳解

    摘要:系統(tǒng)性的介紹關(guān)于布局,也作為自學(xué)的一篇文章基礎(chǔ)理念使用彈性盒子的意義是在任何尺寸的屏幕上改變其和其子元素的尺寸填充屏幕可用空間。屬性一個(gè)布局的頁面所具有的元素可分為類。每行第一個(gè)元素與行首對(duì)齊,每行最后一個(gè)元素與行尾對(duì)齊。 flex-tutorials 系統(tǒng)性的介紹關(guān)于flex布局,也作為自學(xué)的一篇文章 flex基礎(chǔ)理念 使用彈性盒子的意義是在任何尺寸的屏幕上改變其和其子元素的尺寸填充...

    luodongseu 評(píng)論0 收藏0
  • vim編輯器技巧備忘(初級(jí)-中級(jí))

    摘要:相反,不顯示行號(hào)設(shè)置為粘貼模式,解決粘貼時(shí)縮進(jìn)錯(cuò)亂問題。會(huì)自動(dòng)加入創(chuàng)建從當(dāng)前行起至以下行的折疊標(biāo)記,進(jìn)行折疊。中的標(biāo)記都有一個(gè)名字,這個(gè)名字用單一的字符表示。 學(xué)習(xí)vim并且其會(huì)成為你最后一個(gè)使用的文本編輯器 學(xué)習(xí)建議: 丟棄鼠標(biāo)和小鍵盤 具有搭配使用各種按鍵的意識(shí) 首先來一張 mindmap : showImg(http://sean-images.qiniudn.com/V...

    187J3X1 評(píng)論0 收藏0

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

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<