问题描述
|
我有任意数量的文本将在有限的空间中显示。
如何修剪输出,以使“超出”框都不显示,或者如何强制该框创建垂直滚动条?
解决方法
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
}
,对于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
那样)。
您可以看到此操作。
,通常,如果设置了高度/宽度,则“溢出:自动”应该起作用。您可以使用\'overflow:scroll \'强制滚动条。您可以使用\'overflow:hidden; \'隐藏任何内容
CSS样式溢出的关键是高度和宽度必须由浏览器确定,以便浏览器知道何时开始溢出。
,看一下overflow
。 overflow: hidden
剪辑内容,overflow:Scroll
添加滚动条。
, 我如何修剪输出,以便
“超出”的框不是
显示
使用overflow: hidden
如何强制框创建一个
垂直滚动条?
使用overflow: auto
。但是,要使用此功能,请确保在框上指定了宽度/高度
,您可以通过在CSS中添加以下内容来尝试使用省略号:
.truncate {
width: 250px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
在此处可以找到更多的修剪文本和显示省略号的方法:
http://blog.sanuker.com/?p=631