帶標簽的長標題省略展示的實現

leeon 發布于2019-08-30 15:52 / 3070人閱讀

摘要：移動端經常出現一種樣式左側的標題右側的標簽，標題不長時標簽跟隨標題，標題過長時讓標題省略。如下圖所示實現很簡單結構看起來是這樣的精聚寬板凳老灶火鍋簋街店樣式看起來是這樣的好處很明顯可通過動態修改的和動態控制標簽是跟隨標題還是在最右端。

移動端經常出現一種樣式：左側的標題+右側的標簽，標題不長時標簽跟隨標題，標題過長時讓標題省略。

如下圖所示：

實現很簡單

html 結構看起來是這樣的：


    
        精
        聚
        寬板凳老灶火鍋(簋街店)

css 樣式看起來是這樣的：

.caption {
    width: 200px;
    height: 500px;
    background: #efefef;
    margin: 0 auto;
}
.ellipsis {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    display: inline-block;
    max-width: 100%;
}
.bradge {
    float: right;
    margin-left: 10px;
}

好處很明顯

可通過動態修改.ellipsis的max-width和width動態控制標簽是跟隨標題還是在最右端。

原理很簡單

浮動的元素會脫離文檔流，而不會脫離文本流。

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

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

知識整理之HTML篇

摘要：最近關注的重學前端系列文章，也想把已知的前端知識體系梳理一遍，夯實基礎的同時，總結提升。標準模式的排版和運作模式都是以該瀏覽器支持的最高標準運行。模式是目前最常用的模式。嚴格模式不允許展示型棄用元素和框架集。中空格不會被自動刪除。最近關注winter的重學前端系列文章，也想把已知的前端知識體系梳理一遍，夯實基礎的同時，總結提升。接下來會從HTML、CSS、JS、性能、網絡安全、框架通...

yck 2019-08-02 14:10 評論0 收藏0
前端體系梳理

摘要：交互元素用于與用戶交互的元素元數據元素被用于說明其他內容的表現或行為，或者在當前文檔和其他文檔之間建立聯系的元素。一、開篇很久以前我們對于前端的理解就是開發web網頁的，并且在PC上的瀏覽器進行展示；后來，隨著響應式布局和智能手機的興起，web網頁更多的出現在了移動端的瀏覽器中；再后來，隨著技術的不斷發展，web頁面逐漸出現在了PC、Android、Iphone的applicati...

widuu 2019-08-22 17:04 評論0 收藏0
前端體系梳理

摘要：交互元素用于與用戶交互的元素元數據元素被用于說明其他內容的表現或行為，或者在當前文檔和其他文檔之間建立聯系的元素。一、開篇很久以前我們對于前端的理解就是開發web網頁的，并且在PC上的瀏覽器進行展示；后來，隨著響應式布局和智能手機的興起，web網頁更多的出現在了移動端的瀏覽器中；再后來，隨著技術的不斷發展，web頁面逐漸出現在了PC、Android、Iphone的applicati...

DataPipeline 2019-08-29 15:19 評論0 收藏0