第一次换行后隐藏文字? (不是<be />,但是被浏览器包裹)

时间:2011-08-15 19:43:52

标签: jquery css line-breaks

是否有可能知道文本被拆分的位置以及新行开始并隐藏第一行之后的所有内容,使用css还是使用js?

所以,如果我在浏览器中显示以下文字

 aaa aaa aaa aaa 
 bbb bbb bbb bbb

只应显示第一行。

请注意,由于div容器的宽度,第二行是启动的,而不是因为使用<br />或类似的。

3 个答案:

答案 0 :(得分:6)

您可以使用CSS执行此操作。

#content {
    height: 1em;
    overflow: hidden;
}

请参阅example on jsFiddle.

答案 1 :(得分:1)

@ Peter的回答变化:

#content .wrapper-for-text {
  display:inline-block;
  height:1em;
  overflow-hidden;
}

工作示例,包括封装器上的填充,在这里:http://jsfiddle.net/MED62/4/

答案 2 :(得分:0)

http://sandbox.phpcode.eu/g/92073.php

<div style="line-height:15px;height:16px;overflow:hidden;"> 
 aaa aaa aaa aaa <br /> 
 bbb bbb bbb bbb 
</div>