如何在div元素中隐藏太长的文本？

Question

你怎么能隐藏div中的溢出？

如果文本比div长,那么文本只会换行到新行

<div style="width:50px; border:1px solid black; overflow-y:hidden">
    test test test test
</div>

Answer 1

如果您只想在固定宽度div中显示单行文本,white-space:nowrap请放手.与overflow:hidden它一起将强制您的浏览器不要破坏该行并将视图裁剪为您的强制宽度.

你也可以添加text-overflow:ellipsis以避免将单词和字母切成两半,它会...在最后添加一个很好的结果,以显示有些位丢失.我不确定浏览器支持,我从来没有尝试过这个.

Answer 2

CSS属性text-overflow: ellipsis可能可以帮助您解决这个问题.

请考虑以下HTML:

<div id="truncateLongTexts">
    test test test test
</div>

#truncateLongTexts {
  width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis // This is where the magic happens
}

Answer 3

您应该height为div 指定一个,overflow: hidden;如果存在某种定义的高度,则只能隐藏垂直溢出的内容.

换一种说法:

如果文本比div长,那么文本只会换行到新行

但实际上这个div有多长？

请查看我的jsFiddle演示,说明差异.

Answer 4

尝试溢出：无；

你没有提到你是否想要滚动条。

编辑：

抱歉，我的意思是溢出：隐藏。