使用CSS處理標(biāo)題過長，自動截斷，兼容響應(yīng)式布局

y1chuan 發(fā)布于2019-08-01 15:23 / 2751人閱讀

摘要：應(yīng)用場景描述例如從數(shù)據(jù)庫讀取一個商品，那么當(dāng)商品標(biāo)題很長的時候，很可能會影響頁面布局。

應(yīng)用場景描述

例如PHP 從數(shù)據(jù)庫讀取一個商品，那么當(dāng)商品標(biāo)題很長的時候，很可能會影響頁面布局。處理方法如下：

PHP 字符串截取

JS 字符串截取

CSS 屬性處理（推薦）

CSS 屬性處理方法

html代碼片段


    商品標(biāo)題商品標(biāo)題商品標(biāo)題商品標(biāo)題商品標(biāo)題商品標(biāo)題
    9秒前

css樣式代碼

.cut{
    display: inline-block;        /*讓span 標(biāo)簽變成行內(nèi)標(biāo)簽但具有寬高屬性*/
    white-space: nowrap;         /*文本不進行換行*/
    overflow: hidden;           /*隱藏溢出文本*/
    text-overflow: ellipsis;   /*多出文本使用 ....代替*/
    width: 7em;                /*自適應(yīng)布局*/
}

CSS屬性處理后效果：

GPU云服務(wù)器云服務(wù)器響應(yīng)式布局 asp如何響應(yīng)式布局 html響應(yīng)式導(dǎo)布局 js腳本響應(yīng)時間過長

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

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

相關(guān)文章

使用CSS處理標(biāo)題過長，自動截斷，兼容響應(yīng)式布局

摘要：應(yīng)用場景描述例如從數(shù)據(jù)庫讀取一個商品，那么當(dāng)商品標(biāo)題很長的時候，很可能會影響頁面布局。應(yīng)用場景描述例如PHP 從數(shù)據(jù)庫讀取一個商品，那么當(dāng)商品標(biāo)題很長的時候，很可能會影響頁面布局。處理方法如下： PHP 字符串截取 JS 字符串截取 CSS 屬性處理（推薦） CSS 屬性處理方法 html代碼片段商品標(biāo)題商品標(biāo)題商品標(biāo)題商品標(biāo)題商品標(biāo)題商品標(biāo)題 9秒前 ...

weapon 2019-08-29 10:57 評論0 收藏0
如何實現(xiàn)一個這樣的級聯(lián)組件

摘要：封裝組件系列文章如何實現(xiàn)一個這樣的級聯(lián)組件組件背景根據(jù)產(chǎn)品原型實現(xiàn)一個級聯(lián)組件，下面看演示圖應(yīng)用場景很多，如后臺管理系統(tǒng)，旅游系統(tǒng)，廣告投放系統(tǒng)，營銷系統(tǒng)等，現(xiàn)在流行，，三大框架，下面看看怎么使用實現(xiàn)實現(xiàn)邏輯產(chǎn)品經(jīng)理的評審功能需求如下根據(jù)大 Vue封裝組件系列文章如何實現(xiàn)一個這樣的級聯(lián)組件組件背景根據(jù)產(chǎn)品原型實現(xiàn)一個級聯(lián)組件，下面看演示圖 showImg(https://i.lo...

daydream 2019-08-26 10:11 評論0 收藏0
CSS處理文本過長或超出部分（解說一）

摘要：在網(wǎng)頁開發(fā)中，經(jīng)常會遇到文本超出了限定的范圍，尤其是屏幕尺寸的大小導(dǎo)致的，著實影響美觀，這個時候，就需要用對其進行處理。再補充一條，比如想讓內(nèi)容在第二行的時候，超出部分隱藏這個處理方式的目前只兼容內(nèi)核的瀏覽器其他方法見解說二在網(wǎng)頁開發(fā)中，經(jīng)常會遇到文本超出了限定的范圍，尤其是屏幕尺寸的大小導(dǎo)致的，著實影響美觀，這個時候，就需要用css對其進行處理。下面的方法是我在實際工作中總結(jié)...

Bamboy 2019-08-29 12:49 評論0 收藏0
【譯】如何，以及何時使用CSS多列布局

摘要：示例鏈接核心代碼要知道，目前的規(guī)范，的取值只有或者。最近，片段模塊規(guī)范定義了如何為各種片段模塊上下文設(shè)計的碎片化的屬性，規(guī)范包括，和處于停滯狀態(tài)的區(qū)域樣式區(qū)域也會支持展示被分解碎片化連續(xù)的內(nèi)容。原文：When And How To Use CSS Multi-Column Layout作者：Rachel Andrew譯者：博軒當(dāng)我們把注意力都放在 CSS Grid 布局和 CSS ...

fancyLuo 2019-08-30 11:08 評論0 收藏0
第六天移動端Web開發(fā)注意事項

摘要：隨著移動互聯(lián)網(wǎng)的發(fā)展，移動已經(jīng)逐漸成為互聯(lián)網(wǎng)的主要入口，隨之而來的是前端在移動開發(fā)上面臨的各種機遇與挑戰(zhàn)，本文就一些常見移動端問題對移動開發(fā)需要注意的事項進行一下總結(jié)，必然不可能涉及方方面面，但會隨著筆者的積累持續(xù)更新。隨著移動互聯(lián)網(wǎng)的發(fā)展，移動Web已經(jīng)逐漸成為互聯(lián)網(wǎng)的主要入口，隨之而來的是前端在移動Web開發(fā)上面臨的各種機遇與挑戰(zhàn)，本文就一些常見移動端問題對移動Web開發(fā)需要注意...

妤鋒シ 2019-08-30 13:09 評論0 收藏0