自適應(yīng)寬度元素單行文本省略用法探究

K_B_Z 發(fā)布于2019-04-23 13:46 / 2122人閱讀

摘要：單行文本省略和元素及其父元素的屬性都無關(guān)元素或為元素內(nèi)單行文本省略，需要給元素或為元素添加樣式為元素的子元素如果是自適應(yīng)寬度時，內(nèi)的子元素實現(xiàn)單行文本省略，需要給添加樣式

單行文本省略是現(xiàn)代網(wǎng)頁設(shè)計中非常常用的技術(shù)，幾乎每個站點都會用到。單行文本省略適用于顯示摘要信息的場景，如列表標題、文章摘要等。在響應(yīng)式開發(fā)中，自適應(yīng)寬度元素單行文本省略容易失效不起作用，對網(wǎng)頁開發(fā)這造成困擾。因此，本文將要要探究自適應(yīng)寬度元素單行文本省略用法。現(xiàn)代瀏覽器都支持單行文本顯示生省略號（...）樣式，一般情況下，實現(xiàn)單行文本省略只需要給元素添加下面三個CSS樣式：

.demo{
    text-overflow:ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

單行文本省略和元素及其父元素的width屬性都無關(guān)

有很多文章提到單行文本省略時都會添加多一個條件，那就是設(shè)置width屬性。事實真的是這樣嗎？通過下面的實例去檢驗一下就可以證明這個結(jié)論。

實例1：在body添加一個p標簽和一個span標簽，并設(shè)置單行文本省略：

<style>
body,p,span{
    margin:0;
    padding:0;
}

p,
span{
    text-overflow:ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
style>
<body>
    <p>單行文本省略，單行文本省略，單行文本省略，單行文本省略，單行文本省略，單行文本省略，單行文本省略，單行文本省略，單行文本省略，單行文本省略，單行文本省略p>
    <span>單行文本省略，單行文本省略，單行文本省略，單行文本省略，單行文本省略，單行文本省略，單行文本省略，單行文本省略，單行文本省略，單行文本省略，單行文本省略span>
body>

運行結(jié)果是，p標簽內(nèi)文本成功省略，span標簽內(nèi)文本省略失敗，結(jié)果如下圖：

最后，我嘗試著給p標簽設(shè)置寬度為auto或100%，結(jié)果不變；給p標簽和span標簽設(shè)置固定寬度值為300px，結(jié)果不變；用其他標簽把p標簽和span標簽包裹起來，結(jié)果不變；給包裹元素設(shè)置固定寬度值，結(jié)果還是一樣的。這就足以證明了單行文本省略和元素及其父元素的width屬性都無關(guān)。

單行文本省略和元素及其父元素的display屬性有關(guān)

什么屬性會影響單行文本省略呢？在實例1中，我特意用來一個p標簽和一個span標簽，span標簽無法省略。經(jīng)過測試發(fā)現(xiàn)display屬性為inline和inline-block的元素都無法實現(xiàn)省略。這證明單行文本省略與元素的display屬性有關(guān)。

1）table元素（或display為table元素）內(nèi)單行文本省略，需要給table元素（或display為table元素）添加table-layout:fixed樣式

設(shè)置為table布局元素的子元素單行文本省略不起作用，例如：

<style>
body,p,span,img{
    margin:0;
    padding:0;
}

p,
span{
    text-overflow:ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.demo{
    display:table;
    width:100%;
    padding:15px 0;
    border-top:1px solid #ffffd;
}
            
.demo .left,
.demo .right{
    display:table-cell;
}
            
.demo .left{
    width:120px;
    min-width:120px;
    height:90px;
    background-color:blue;
}

.demo .left img{
    display:block;
}
            
.demo .right{
    vertical-align: top;
    padding-left:15px;
}                       
style>
<body>
    <div class="demo">
        <div class="left"><img src="img/1879408419498933204.jpg" width="100%" height="auto" />div>
        <div class="right">
            <h2>這是一個標題h2>
            <p>這是一段介紹文字。這是一段介紹文字。這是一段介紹文字。這是一段介紹文字。這是一段介紹文字。這是一段介紹文字。這是一段介紹文字。這是一段介紹文字。這是一段介紹文字。p>
        div>
    div>
body>

這個實例中，demo元素設(shè)置為dispaly:table，其子元素left和right設(shè)置為display:table-cell，這種布局方式導(dǎo)致了元素right內(nèi)的h2和p的文本省略樣式都不起作用，運行結(jié)果如下圖：

為了使元素right內(nèi)的h2和p的文本省略樣式起作用，必須在元素demo（即設(shè)置display:table的元素）添加一條樣式table-layout:fixed，這個解決方式同樣適用于table元素。添加這個樣式后，運行結(jié)果如下圖：

2）display為flex元素的子元素flex-item如果是自適應(yīng)寬度時，flex-item內(nèi)的子元素實現(xiàn)單行文本省略，需要給flex-item添加overflow:hidden樣式

display為flex元素的子元素flex-item如果是自適應(yīng)寬度時，flex-item內(nèi)的子元素單行文本省略樣式不起作用，例如：

<style>
body,h2,p,span,img{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
            
.demo{
    display:flex;
    display:-webkit-flex;
    width:100%;
    padding:15px 0;
    border-top:1px solid #ffffd;
}
            
.left,
.right{
    height:90px;
}
            
.demo .left{
    width:120px;
    background-color:red;
    flex-shrink: 0;
}
            
.demo .right{
    flex:auto;
    -webkit-flex:auto;
    padding-left:15px;
}
            
h2,
p,
span{
    text-overflow:ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

style>
<body>
    <div class="demo">
         <div class="left"><img src="img/1879408419498933204.jpg" width="100%" height="auto" />div>
         <div class="right">
              <h2>這是一個標題h2>
              <p>這是一段介紹文字。這是一段介紹文字。這是一段介紹文字。這是一段介紹文字。這是一段介紹文字。這是一段介紹文字。這是一段介紹文字。這是一段介紹文字。這是一段介紹文字。p>
         div>
    div>
body>

在這個flex布局的實例中，元素right的寬度時自適應(yīng)的，元素right內(nèi)的h2和p元素單行文本省略樣式都不起作用。如果去掉標簽直接在元素right內(nèi)添加文本，并為元素right添加單行文本省略樣式，這時單行文本省略樣式卻可以正常工作。該實例的運行結(jié)果如下圖：

在這個實例中，為元素right添加overflow:hidden樣式后，單行文本省略樣式工作正常，運行結(jié)果如下圖：

總結(jié)：

1）單行文本省略必須滿足三個CSS樣式：text-overflow:ellipsis，white-space: nowrap，overflow: hidden。

2）單行文本省略和元素及其父元素的width屬性都無關(guān)

3）table元素（或display為table元素）內(nèi)單行文本省略，需要給table元素（或display為table元素）添加table-layout:fixed樣式

4）display為flex元素的子元素flex-item如果是自適應(yīng)寬度時，flex-item內(nèi)的子元素實現(xiàn)單行文本省略，需要給flex-item添加overflow:hidden樣式

GPU云服務(wù)器云服務(wù)器自適應(yīng)寬度寬度自適應(yīng) 自適應(yīng)寬度按鈕 rem寬度自適應(yīng)

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

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

發(fā)表評論

登陸后可評論

0條評論

K_B_Z

男|高級講師

我要關(guān)注我要私信

TA的文章

心血來潮，總結(jié)技術(shù)框架

閱讀 2556·2021-10-11 10:58
Parcel 打包示例 - React HelloWorld

閱讀 1041·2019-08-29 13:58
2019前端面試題（持續(xù)更新）

閱讀 1675·2019-08-26 13:32
css頁面布局技巧

閱讀 840·2019-08-26 10:40
一個基于 Vue 的地區(qū)選擇器v-distpicker

閱讀 3268·2019-08-26 10:18
require.js學習筆記。

閱讀 1764·2019-08-23 14:18
原生Js-msi系統(tǒng)

閱讀 1116·2019-08-23 10:54
小程序授權(quán)功能（廢）

閱讀 443·2019-08-22 18:39

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

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

自適應(yīng)寬度元素單行文本省略用法探究

相關(guān)文章

Ant Design Pro - 實踐React Hooks - 組件

CSS 常用的定位和布局方法匯總(已添加源碼地址)

多余文字省略解決方案

多余文字省略解決方案

發(fā)表評論

0條評論

K_B_Z

男|高級講師

TA的文章

心血來潮，總結(jié)技術(shù)框架

Parcel 打包示例 - React HelloWorld

2019前端面試題（持續(xù)更新）

css頁面布局技巧

一個基于 Vue 的地區(qū)選擇器v-distpicker

require.js學習筆記。

原生Js-msi系統(tǒng)

小程序授權(quán)功能（廢）

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

自適應(yīng)寬度元素單行文本省略用法探究

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！