text-overflow ellipse

[Lauviah0622]

多行情況

https://stackoverflow.com/questions/33058004/applying-an-ellipsis-to-multiline-text

平常怎麼設定？

[Lauviah0622]

先講單行的情況，蠻直覺的

1. white-space: nowrap 不要讓她換行
2. overflow: hidden
3. text-overflow: ellipse

[Lauviah0622]

多行：就看下面幾篇文章吧 一個小插件，不過沒有看他怎麼實現的 https://dotdotdot.frebsite.nl/

https://css-tricks.com/line-clampin/ http://hackingui.com/front-end/a-pure-css-solution-for-multiline-text-truncation/ https://web.archive.org/web/20160506153100/http://www.mobify.com/blog/multiline-ellipsis-in-pure-css/

大概看一下，好像有幾個思路

1. 用 JS：裡面有提到 clamp.js
2. 用一些還沒普遍的屬性，可是就要加 prefix
3. 用 CSS 拼湊起來，把太多行的下面 overflow 不過這裡要調整 white-space 還是換行甚麼的，改成 pre-line （有點旺季，但總而言之不要在單字中換行就對了），最後面再加上偽元素的 content: ... ，稍微獎感覺很簡單，不過應該有很多東西要調整的，這個方法的難點是讓偽元素接在文字後面而不是接在區塊外面。