使用CSS處理標題過長，自動截斷，兼容響應式布局

weapon 發布于2019-08-29 10:57 / 981人閱讀

摘要：應用場景描述例如從數據庫讀取一個商品，那么當商品標題很長的時候，很可能會影響頁面布局。

應用場景描述

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

PHP 字符串截取

JS 字符串截取

CSS 屬性處理（推薦）

CSS 屬性處理方法

html代碼片段


    商品標題商品標題商品標題商品標題商品標題商品標題
    9秒前

css樣式代碼

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

CSS屬性處理后效果：

GPU云服務器云服務器響應式布局 asp如何響應式布局 html響應式導布局 js腳本響應時間過長

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

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

使用CSS處理標題過長，自動截斷，兼容響應式布局

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

y1chuan 2019-08-01 15:23 評論0 收藏0
如何實現一個這樣的級聯組件

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

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

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

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

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

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

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

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