用戶端(CSS)解決自動截取字串長度,並以…代替

通常的我們在讀取文章標題的時候，遇到字元過多，都是通過程式在SERVER端截取一定的字元數，然後添加...來實現標題長度截取的。其實我們也可以通過CSS來控制。

 

實列如下：

.title
{
 width:200px;
 white-space:nowrap;
   word-break:keep-all;
   overflow:hidden;
   text-overflow:ellipsis;
}

可用span或div引用,例如:

<span class=title>用戶端解決標題顯示太長省略多餘部分並加省略符號的樣式</span>

<div class=title>用戶端解決標題顯示太長省略多餘部分並加省略符號的樣式</div>

以上2例顯示在超過樣式定義的200px寬度後,後面的字元將被...替換.

 

實列如下：

.title
{
 width:200px;
 white-space:nowrap;
   word-break:keep-all;
   overflow:hidden;
   text-overflow:ellipsis;
}

可用span或div引用,例如:

<span class=title>用戶端解決標題顯示太長省略多餘部分並加省略符號的樣式</span>

<div class=title>用戶端解決標題顯示太長省略多餘部分並加省略符號的樣式</div>

以上2例顯示在超過樣式定義的200px寬度後,後面的字元將被...替換.