1. 程式人生 > >html文字超出部分顯示省略號(偶爾失效)

html文字超出部分顯示省略號(偶爾失效)

之前每次寫文字超出顯示省略號的樣式都是在網上百度的  這次也是  但效果沒有達到預期的那樣(就是失敗了。。。。) 這是我百度到的程式碼

<title>文字超過兩行或三行就顯示省略號</title>
<style type="text/css">
.p1{
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
</style>
</head>
<body>
<p class="p1">
動機客戶趕快交電話費開發將對方很高科技的化工科技和登記客戶對方更好看的恢復規劃的國際化考核得分科技化工等客觀和登記和高科技好讀後感京東框架讀後感動機客戶趕快交電話費開發將對方很高科技的化工科技和登記客戶對方更好看的恢復規劃的國際化考核得分科技化工等客觀和登記和高科技好讀後感京東框架讀後感動機客戶趕快交電話費開發將對方很高科技的化工科技和登記客戶對方更好看的恢復規劃的國際化考核得分科技化工等客觀和登記和高科技好讀後感京東框架讀後感動機客戶趕快交電話費開發將對方很高科技的化工科技和登記客戶對方更好看的恢復規劃的國際化考核得分科技化工等客觀和登記和高科技好讀後感京東框架讀後感
</p>
</body>

---------------------

本文來自 swpu_lwf 的CSDN 部落格 ,全文地址請點選:https://blog.csdn.net/liwenfei123/article/details/69666880?utm_source=copy 

但是我用在我的程式碼中是失效的  後來我發現加上這個就可以了

white-space:pre-line;

這是  合併空白符序列,但是保留換行符。

後來查資料發現應該是我的元素脫離文件流然後定義寬度無效  換行符失效導致的