只在div内的两行内包含文本 [英] Wrap a text within only two lines inside div

问题描述

我想在特定宽度的div内只在两行内包装文本。如果文本超过两行的长度，那么我想显示缺失。
是否有办法使用CSS？

I want to wrap a text within only two lines inside div of specific width. If text goes beyond the length of two lines then I want to show elipses. Is there a way to do that using CSS?

例如

Sample text showing wrapping
of text in only two line...

感谢

推荐答案

使用CSS限制输出到两行文本是可能的，如果设置 height ： ： >



Limiting output to two lines of text is possible with CSS, if you set the line-height and height of the element, and set overflow:hidden;:

#someDiv {
    line-height: 1.5em;
    height: 3em;       /* height is 2x line-height, so two lines will display */
    overflow: hidden;  /* prevents extra lines from being visible */
}

--- jsFiddle DEMO ---

或者，您可以使用CSS text-overflow 和 white-space 属性来添加省略号，但这只适用于单行。

Alternatively, you can use the CSS text-overflow and white-space properties to add ellipses, but this only appears to work for a single line.

#someDiv {
    line-height: 1.5em;
    height: 3em;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100%;
}

和一个演示：

--- jsFiddle DEMO ---

实现多行文本和省略号似乎是javascript的范围。

Achieving both multiple lines of text and ellipses appears to be the realm of javascript.

这篇关于只在div内的两行内包含文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！