logo标签列表

CSS - 如何裁剪文本输出？

csstextscroll
3

我有一些文本需要在有限的空间内显示。

我该如何截断输出，以便超出"盒子"的内容不被显示，或者如何强制"盒子"创建垂直滚动条？

6个回答
2
通常情况下，如果有设置高度/宽度，'overflow: auto' 应该可以工作。您可以使用 'overflow: scroll' 强制出现滚动条。您可以使用 'overflow: hidden;' 隐藏任何内容。
CSS 样式中关于溢出的关键是，必须由浏览器确定高度和宽度，以便它知道何时开始溢出。
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那样）。

您可以在此示例中查看。

1
具有讽刺意味的是，您的文本长度不够。我不得不缩小窗口大小才能使滚动条出现。 - thirtydot
1
你可以尝试使用省略号来添加CSS，方法如下：
.truncate {
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

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

1

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

看一下overflow。 overflow: hidden将内容裁剪，overflow:scroll添加滚动条。

1
如何裁剪输出，以便不显示超出框的内容？
使用overflow: hidden 如何强制框创建垂直滚动条？
使用overflow: auto。但是，在使用此功能之前，请确保已在框上指定了宽度/高度。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接