自適應寬度元素單行文本省略用法探究

K_B_Z 發布于2019-04-23 13:46 / 2104人閱讀

摘要：單行文本省略和元素及其父元素的屬性都無關元素或為元素內單行文本省略，需要給元素或為元素添加樣式為元素的子元素如果是自適應寬度時，內的子元素實現單行文本省略，需要給添加樣式

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

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

單行文本省略和元素及其父元素的width屬性都無關

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

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

<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>

運行結果是，p標簽內文本成功省略，span標簽內文本省略失敗，結果如下圖：

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

單行文本省略和元素及其父元素的display屬性有關

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

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

設置為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元素設置為dispaly:table，其子元素left和right設置為display:table-cell，這種布局方式導致了元素right內的h2和p的文本省略樣式都不起作用，運行結果如下圖：

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

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

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

<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的寬度時自適應的，元素right內的h2和p元素單行文本省略樣式都不起作用。如果去掉標簽直接在元素right內添加文本，并為元素right添加單行文本省略樣式，這時單行文本省略樣式卻可以正常工作。該實例的運行結果如下圖：

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

總結：

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

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

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

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

云服務器 GPU云服務器自適應寬度寬度自適應自適應寬度按鈕 rem寬度自適應

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/2301.html

Ant Design Pro - 實踐React Hooks - 組件

摘要：另外，監聽事件，更新寬度狀態。文本真實寬度渲染完成后，通過獲取元素寬度。是否超長比較文本真實寬度和組件的寬度。設置為其他狀態或中的狀態時，只在這些狀態變化時觸發注意，依賴為對象時，不會深比較。得益于的用法靈活，組件寫法上確實簡潔不少。需求后臺項目，使用Ant Design Pro, 有這樣一個需求：有一個表格，寬度是自適應的，表格中有一列是備注，文本長度不定，我們希望在文本過長的時...

twohappy 2019-08-26 10:40 評論0 收藏0
CSS 常用的定位和布局方法匯總(已添加源碼地址)

CSS-Layout 旨在打造詳盡的前端布局代碼學習庫（自從用了框架開發，CSS生疏了不少，所以開這個庫練練手）SF不能正確解析含有中文的網址，所以某些預覽鏈接無法跳轉，請訪問我的博客閱讀此文常見定位方法水平居中子元素為行內元素還是塊狀元素，寬度一定還是寬度未定，采取的布局方案不同。方案選擇基本思路：子元素為行內元素：對父元素設置text-align:center; 定寬塊狀元素: 設...

loonggg 2019-08-29 12:15 評論0 收藏0
多余文字省略解決方案

摘要：本文將討論單行和多行文字省略的方案，特別是多行文字的省略，不像單行省略的解決方案那么簡單全面，故本文重點討論多行文字的方案。則不顯示超出容器的文字內容，若無此屬性，文字會顯示超過容器而不省略。總結本文介紹的多余文字省略方案，都是較為常用的。網頁前端開發過程中，后端傳來的文本數據長短不可控，如果接收到的文本非常長且又沒有作自適應處理，頁面效果會十分可怕。自適應處理在這種場景下確實很重要...

ThinkSNS 2019-08-20 14:24 評論0 收藏0
多余文字省略解決方案

摘要：本文將討論單行和多行文字省略的方案，特別是多行文字的省略，不像單行省略的解決方案那么簡單全面，故本文重點討論多行文字的方案。則不顯示超出容器的文字內容，若無此屬性，文字會顯示超過容器而不省略。總結本文介紹的多余文字省略方案，都是較為常用的。網頁前端開發過程中，后端傳來的文本數據長短不可控，如果接收到的文本非常長且又沒有作自適應處理，頁面效果會十分可怕。自適應處理在這種場景下確實很重要...

joy968 2019-08-30 15:52 評論0 收藏0