擷取字串並補充省略號的兩種方法

weixin_34290000發表於2017-03-15

css方式(建議使用)
用css方式來實現擷取字串並補充省略號:


3625406-8d7876f8918d12c4.png
css程式碼圖

那麼我們來了解一下這幾個css屬性,為何能實現這種效果:

1. white-space
如何處理元素內的空白

3625406-46d0baf727857804.png
white-space-可能的值

2. word-break
自動換行的處理方法

3625406-dfd4576990e716fd.png
word-break-語法

3. overflow
當內容溢位元素框時發生的事情

3625406-92b53f98f419e2bd.png
overflow-可能的值

4.text-overflow(本次功能實現的最重要部分)
當文字溢位包含元素時發生的事情

3625406-0cc1e336147cc37c.png
text-overflow-語法


js方式

這種方式應用較少,直接上程式碼:

3625406-40b0603e638b1b3e.png
js程式碼圖

版權印為您的作品印上版權47110210

相關文章