在頁面重構中,經常需要將過多的內容隱藏而顯示部分。在單行文本中實現非常簡單,但是在多行文本中,則需要根據實際選擇不同的方式。 用CSS實現多行溢出隱藏的代碼非常簡單,但是兼容性也相對較低。 這不是我們這次需要講解的重點。 這次的關注點在於如何用JS來實現隱藏過多內容,用省略號 ...
在頁面重構中,經常需要將過多的內容隱藏而顯示部分。在單行文本中實現非常簡單,但是在多行文本中,則需要根據實際選擇不同的方式。 用CSS實現多行溢出隱藏的代碼非常簡單,但是兼容性也相對較低。 這不是我們這次需要講解的重點。 這次的關注點在於如何用JS來實現隱藏過多內容,用省略號 ...
如圖: 但是這個屬性只支持單行文本的溢出顯示省略號,如果我們要實現多行文本溢出顯示省略號呢。 接下來 ...
單行: overflow:hidden; text-overflow:ellipsis; white-space:nowrap; 多行: overflow: hidden; text-overflow: ellipsis ...
style='min-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis' ...
單行隱藏: overflow: hidden;/*超出部分隱藏*/ text-overflow:ellipsis;/* 超出部分顯示省略號 */ white-space: nowrap;/*規定段落中的文本不進行換行 */ 多行隱藏: 多行隱藏需要 ...
轉載:https://www.cnblogs.com/wangzhichao/p/7809748.html html單行、多行文本溢出隱藏 單行: div{ /* 單行溢出隱藏 */ width: 150px; white-space: nowrap ...
歡迎加入前端交流群來py:749539640 單行: 多行: 注: -webkit-line-clamp用來限制在一個塊元素顯示的文本的行數。 為了實現該效果,它需要組合其他的WebKit屬性。常見結合屬性: display: -webkit-box ...
溢出的文字隱藏 word-break:自動換行 normal 使用瀏覽器默認的換行規則。 break-all 允許在單詞內換行。 keep-all 只能在半角空格或連字符處換行。 主要處理英文單詞 white-space white-space設置或檢索對象內文本顯示方式。通常 ...