如何使用CSS在多行div中用省略號截斷文本？

Question

如何在多行div字段中用省略號截斷文本？ 當div為單行時可以使用。 我如何使其適用於多行，以便將省略號放在div右下角的最末端？

 <!DOCTYPE html> <html> <head> <style> #div1 { white-space: nowrap; width: 12em; overflow: hidden; text-overflow: ellipsis; border: 1px solid #000000; } #div2 { /*white-space: nowrap; */ width: 12em; overflow: hidden; text-overflow: ellipsis; border: 1px solid #000000; height: 3em; } </style> </head> <body> <p>The following two divs contains a long text that will not fit in the box. As you can see, the text is clipped.</p> <p>This div uses "white-space: nowrap;":</p> <div id="div1">This is some long text that will not fit in the box</div> <p>This div uses "height: 3em;":</p> <div id="div2">This is some long text that will not fit in the box This is some long text that will not fit in the box This is some long text that will not fit in the box</div> </body> </html>

Answer 1

這項工作不會太復雜。 不過似乎沒有跨瀏覽器支持。

.description {
  height: 4.5em;
  display: block; /* Fallback for non-webkit */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

 #div1 { white-space: nowrap; width: 12em; overflow: hidden; text-overflow: ellipsis; border: 1px solid #000000; } #div2 { /*white-space: nowrap; */ width: 12em; overflow: hidden; text-overflow: ellipsis; border: 1px solid #000000; height: 3em; } #div3 { width: 12em; border: 1px solid #000000; height: 3em; line-height: 1em; display: block; /* Fallback for non-webkit */ display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }

 <p>The following two divs contains a long text that will not fit in the box. As you can see, the text is clipped.</p> <p>This div uses "white-space: nowrap;":</p> <div id="div1">This is some long text that will not fit in the box</div> <p>This div uses "height: 3em;":</p> <div id="div2">This is some long text that will not fit in the box This is some long text that will not fit in the box This is some long text that will not fit in the box</div> <p>This is the solution.</p> <div id="div3">This is some long text that will not fit in the box This is some long text that will not fit in the box This is some long text that will not fit in the box</div>

如何使用CSS在多行div中用省略號截斷文本？

問題描述

1 個解決方案

解決方案1
1 已采納 2017-11-30 19:19:23

如何使用CSS在多行div中用省略號截斷文本？

問題描述

1 個解決方案

解決方案1 1 已采納 2017-11-30 19:19:23

解決方案1
1 已采納 2017-11-30 19:19:23