web前端總結之文本超出顯示省略號
當網頁中顯示文字過多時，會出現如下樣式的文字

文字顯示為省略號，當鼠標移上去時顯示文字。 這就是文本超出顯示省略號。 主要用到了： text-overflow:ellipsis; overflow:hidden; white-space: nowrap; 在標簽中添加title=“被省略的文字”，實現鼠標移動到省略號上顯示被省略的文字。

效果：

一般都用在ul 的li中，實現文字的有序排列。顯得整齊有序！
后面代碼講解：

<div class="notext"><i class="name_sty" :title="item.file.name"> {{item.file.name}}</i><i class=" file_del" @click="fileDel(index)">刪除</i> </div>

注：在vue中title應 這么寫

<i class="name_sty" :title="item.file.name"> {{item.file.name}}</i>

css :

.name_sty {text-overflow: ellipsis;overflow: hidden;white-space: nowrap;display: inline-block;width: 200px; cursor: pointer; }

1 給li設定寬度，使得排版整齊； 2 給li中的文字添加i標簽。這是為了讓li標簽不被完全占滿當然用padding也可以，但是推薦添加標簽做。因為i標簽的內容后面可能還有其他內容。i標簽的css屬性：display:inline-block;//行內塊，使得i標簽可以設置寬高等，而且不會獨自占一行；text-overflow: ellipsis;//設置文本、字內容超出部分顯示省略號；overflow: hidden;//i標簽中的內容超出部分隱藏。注意與text-overflow的區別；font-style：normal;//由于是i標簽它本身的效果是讓文字斜體，所以為了需要可以合理去掉這個效果。

另外實現第二行尾部開始省略。

overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;

總結

以上是生活随笔為你收集整理的web前端总结之文本超出显示省略号的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。