多行文字加省略號的處理方法

鄒R-ainna發表於2018-11-22

寫這篇文章的起因是，當使用樣式實現多行文字超出顯示省略號的效果的時候，發現有的頁面上省略號不是在文字末尾，而是在文字中間。後來查了下竟是跟文字在a連結裡顯示有關。下面詳細說明下。

頁面上文字超出部分用省略號表示，有多種方法可以實現，比如利用JS計算字數或是寬度，超出指定長度的字數，截斷文字並用'...'拼接，比如可以用樣式來簡單控制，下面就介紹用樣式實現的方法。以下方法主要相容移動端，PC端主流瀏覽器。

1. 單行文字超出...

css程式碼：

.text{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
複製程式碼

html程式碼：

<p class="text">我是單行我是單行文字我是單行文字我是單行文字我是單行文字我是單行文字文字</p>
複製程式碼

2. 多行文字超出...

css程式碼：（利用被廢棄的webkit私有屬性實現，可在移動端使用）

.text2{
    display:-webkit-box; display:-webkit-flex; display:-ms-flexbox;
    -webkit-box-orient:vertical; box-orient: vertical;
    -webkit-line-clamp:2; line-clamp: 2;    //顯示的行數
    overflow:hidden;
    text-overflow:ellipsis;
}
複製程式碼

html程式碼：

<p class="text2">我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字</p>
複製程式碼

3. 多行省略號在a連結中使用顯示有bug

現象是省略號不在文章末尾顯示，而是在文章中間，就是文章開頭提到的錯誤現象。這種現象出現在移動端，PC端測試了下，可以正常顯示。可能跟瀏覽器核心有關。

解決辦法：將需要省略號的文字不直接用a標籤包裹。或是在a標籤內再巢狀一層。

比如：

<a href=""><span>我是多行文字我是多行文字我是多行文字我是多行文字</span></a>
複製程式碼

相關文章