效果圖

text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;display: -moz-box;-moz-line-clamp: 2;-moz-box-orient: vertical;overflow-wrap: break-word;word-break: break-all;white-space: normal;overflow: hidden;

• text-overflow

CSS 屬性確定如何向用戶發出未顯示的溢出內容信號.它可以被剪切，顯示一個省略號（‘…’）或顯示一個自定義字符串.

• -webkit-line-clamp

CSS 屬性 可以把 塊容器 中的內容限制為指定的行數.
它只有在 display 屬性設置成 -webkit-box 或者 -webkit-inline-box 并且 -webkit-box-orient (en-US) 屬性設置成 vertical時才有效果
在大部分情況下,也需要設置 overflow 屬性為 hidden, 否則,里面的內容不會被裁減,并且在內容顯示為指定行數后還會顯示省略號(ellipsis ).
當他應用于錨(anchor)元素時,截取動作可以發生在文本中間,而不必在末尾.

• overflow

CSS 屬性-wrap 是用來說明當一個不能被分開的字符串太長而不能填充其包裹盒時，為防止其溢出，瀏覽器是否允許這樣的單詞中斷換行。與word-break相比，overflow-wrap僅在無法將整個單詞放在自己的行而不會溢出的情況下才會產生中斷。

注：word-wrap** 屬性原本屬于微軟的一個私有屬性，在 CSS3 現在的文本規范草案中已經被重名為 overflow-wrap 。 word-wrap 現在被當作 overflow-wrap 的 “別名”。 穩定的谷歌 Chrome 和 Opera 瀏覽器版本支持這種新語法。**

• white-space

CSS 屬性是用來設置如何處理元素中的 空白 (en-US)。

.pay_row_1{padding: 5px;height: auto;width: 100%;display: flex;justify-content: flex-start;align-items: flex-start;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;display: -moz-box;-moz-line-clamp: 2;-moz-box-orient: vertical;overflow-wrap: break-word;word-break: break-all;white-space: normal;overflow: hidden;} <div class="pay_row_1"><span class="tag_txt">京東貼息</span><span class="pay_title">{{item}}</span></div>

總結

以上是生活随笔為你收集整理的CSS实现文本显示两行的全部內容，希望文章能夠幫你解決所遇到的問題。

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