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

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

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

1. 單行文字超出...

css代碼：web

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

html代碼：瀏覽器

<p class="text">我是單行我是單行文本我是單行文本我是單行文本我是單行文本我是單行文本文本</p>
複製代碼

2. 多行文本超出...

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

.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端測試了下，能夠正常顯示。可能跟瀏覽器內核有關。flex

解決辦法：將須要省略號的文本不直接用a標籤包裹。或是在a標籤內再嵌套一層。flexbox

好比：spa

<a href=""><span>我是多行文本我是多行文本我是多行文本我是多行文本</span></a>
複製代碼