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

應用場景描述

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

• PHP 字符串截取

• JS 字符串截取

• CSS 屬性處理（推薦）

CSS 屬性處理方法

html代碼片斷

<li >
    <span class="cut">商品標題商品標題商品標題商品標題商品標題商品標題</span>
    <span style="float: right;">9秒前</span>
</li>

css樣式代碼

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

CSS屬性處理後效果：