CSS - 如何修剪文本输出？答案

【问题标题】：CSS - how to trim text output?CSS - 如何修剪文本输出？
【发布时间】：2011-08-06 12:49:38
【问题描述】：

我有任意数量的文本将显示在一个有限的空间中。

如何修剪输出以使框“之外”的内容不显示，或如何强制框创建垂直滚动条？

【问题讨论】：

【解决方案1】：

对于 HTML：

<div id="smallBoxWithLotsOfText">There is way more text in here than what
    I have typed.  I mean, this text is long.  There is lots of it.  
    You can't even imagine how long this text is gonna get.  No joking.  
    It's long; it's very, very long.  It keeps going, and going, and going. 
    It's the Energizer Bunny of text.  Like, seriously dude.  It's crazy.  
    Absolutely crazy.
</div>

试试 CSS：

#smallBoxWithLotsOfText {
    width: 100%;
    height: 100px;
    overflow: auto;
}

height 属性告诉盒子有多高。 overflow 属性告诉盒子在内容变大时添加滚动条，但并不总是有滚动条（就像scroll 那样）。

你可以see this in action。

【讨论】：

具有讽刺意味的是，您的文字不够长。我必须减小窗口的大小才能显示滚动条。

【解决方案2】：

如果设置了高度/宽度，通常“溢出：自动”应该可以工作。您可以使用“溢出：滚动”强制滚动条。您可以使用 'overflow: hidden;' 隐藏任何内容

CSS 样式溢出的关键是高度和宽度必须由浏览器确定，以便它知道何时开始溢出。

【讨论】：

【解决方案3】：

overflow 属性。您可以将值设置为hidden 隐藏数据，scroll 滚动数据。

<div class="text">this is some text that would be very long...</div>

//Hidden
.text
{
    overflow: hidden;
    width: 50px;
    height: 50px
}
//Scroll    
.text
{
    overflow: scroll;
    width: 50px;
    height: 50px
}

【讨论】：

【解决方案4】：

看看overflow。 overflow: hidden 剪辑内容，overflow:Scroll 添加滚动条。

【讨论】：

【解决方案5】：

如何修剪输出，以便任何“超出”盒子的东西都不是显示

使用overflow: hidden

如何强制盒子创建一个垂直滚动条？

使用overflow: auto。但是，要使用它，请确保您在框上指定了宽度/高度

【讨论】：

【解决方案6】：

您可以尝试通过在 CSS 中添加以下内容来使用省略号：

.truncate {
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

可以在此处找到更多修剪文本和显示省略号的方法： http://blog.sanuker.com/?p=631

【讨论】：