Question

我有一定数量的文字会显示在有限的空间内。

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

Answer 1

如果有设定的高度/宽度，通常'溢出：自动'应该有效。您可以使用'overflow：scroll'强制滚动条。您可以使用'overflow：hidden;'

隐藏任何内容

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

Answer 2

对于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。

Answer 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
}

Answer 4

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

Answer 5

如何修剪输出以便什么是“超越”的盒子不是显示

使用overflow: hidden

如何强制该框创建一个垂直滚动条？

使用overflow: auto。但是，要使用此功能，请确保在框中指定了宽度/高度

Answer 6

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

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

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

CSS - 如何修剪文本输出？

6 个答案: