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

時間 2019-12-08

標籤自適應寬度元素單行文本省略用法探究欄目 CSS 简体版

原文原文鏈接

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

.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標籤內文本省略失敗，結果以下圖：flex

最後，我嘗試着給p標籤設置寬度爲auto或100%，結果不變；給p標籤和span標籤設置固定寬度值爲300px，結果不變；用其餘標籤把p標籤和span標籤包裹起來，結果不變；給包裹元素設置固定寬度值，結果仍是同樣的。這就足以證實了單行文本省略和元素及其父元素的width屬性都無關。spa

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

什麼屬性會影響單行文本省略呢？在實例1中，我特地用來一個p標籤和一個span標籤，span標籤沒法省略。通過測試發現display屬性爲inline和inline-block的元素都沒法實現省略。這證實單行文本省略與元素的display屬性有關。code

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

設置爲table佈局元素的子元素單行文本省略不起做用，例如：ip

<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 #ddd;
}
            
.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 #ddd;
}
            
.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>