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

Question

How do I truncate text with ellipsis in a multi-line div field? 如何在多行div字段中用省略号截断文本？ It works when the div is a single line. 当div为单行时可以使用。 How do I make it work for multiple lines so it puts ellipsis at the very end in the lower right corner of the 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

This worked without getting too complicated. 这项工作不会太复杂。 It doesn't appear to be cross-browser supported though. 不过似乎没有跨浏览器支持。

.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