使用 css 将文本限制在两行中，仅当文本出现在外部时才显示“...”

Question

这是 HTML 代码（此处有 css 处），仅显示 div 内的文本。 dive 之外的文本看起来被截断了，这是完美的。

<div style="height:40px;overflow:hidden;width:260px; border:1px solid red;">
 a b c d e f g h i j k l m n o p q r s t u v w x y z a b c d e f g h i j k l m n o p q r s t u v w x y z
</div>

问题是：是否可以在截断文本的末尾显示"..."？因此，如果文本未被截断并适合 div，则不显示 ...，否则显示“...”。

jsFiddle preview is available here

仅

CSS - 这可能吗？谢谢。

Answer 1

您可以像下面那样使用 CSS 来达到您需要的结果。

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

工作示例text-overflow

使用 css 将文本限制在两行中，仅当文本出现在外部时才显示“...”

Restricting text in two lines using css only with showing "..." if text comes outside

html

css

text