CSS 使文本在绝对定位的 div 内换行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6742019/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Make text wrap inside an absolutely positioned div
提问by Lorenz
I have an absolutely positioned div with text inside it but it overflows over the edge of the width. If i use overflow:hidden then the overflow disappears. However, I want the text to wrap over multiple lines over the span of the height.
我有一个绝对定位的 div，里面有文本，但它溢出了宽度的边缘。如果我使用溢出：隐藏然后溢出消失。但是，我希望文本在高度范围内环绕多行。
Am I missing something here? Thanks.
我在这里错过了什么吗？谢谢。
#absolute_div
{
background-color: #8cc63f;
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
padding: 0px 5px 0px 5px;
width: 44px;
height: 50px;
}
采纳答案by Dawson
I forked around with @alex's jsfiddle example to illustrate (further) the point he was making.
我用@alex 的 jsfiddle 例子来说明（进一步）他提出的观点。
The text IS wrapping; however, you've set a height. A rigid height will keep the divfrom expanding, which is what I assume you wanted. The amount of text that wraps and fills the space is greatly going to depend on your line-height, font-sizeand any other CSS you may have applied to the contents of the container.
文本正在换行；但是，您已经设置了高度。刚性高度将阻止div扩展，这就是我认为您想要的。文本的量包装和填充的空间被大大地要依赖于你的line-height，font-size和任何其他的CSS，你可能已经应用于容器的内容。
In the fiddle I forked, I set font-size:10px; line-height:1- got 5 wrapping lines of text and the remaining contents are hidden by the height/width parameters you set in you declaration.
在我分叉的小提琴中，我设置了font-size:10px; line-height:1- 有 5 行文本环绕，其余内容由您在声明中设置的高度/宽度参数隐藏。
word-wrap, white-space, overflow:visibleare probably not what you're after unless you don't mind the 44x50 green box with text spilling out of it, or scrollbars. HTH
word-wrap, white-space,overflow:visible可能不是您想要的，除非您不介意带有溢出文本的 44x50 绿色框或滚动条。HTH
回答by sandeep
@lorenz; to wrap the word you have to use word-wrapproperty in your div as afshin said in his comment
for example
@洛伦兹；换到使用你的字word-wrap财产在你的DIV在他的评论中说，阿夫欣
例如
#absolute_div
{
background-color: #8cc63f;
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
padding: 0px 5px 0px 5px;
width: 44px;
min-height: 50px;
overflow:hidden;
word-wrap:break-word;
}
check this http://jsfiddle.net/aE8cg/
回答by Yasha
I was having a problem a lot like this for a while.
有一段时间我遇到了很多这样的问题。
I had an interface that was taking user input with small amounts of HTML in it that would then display it on the side to show how it would like.
我有一个界面，它接受用户输入，其中包含少量 HTML，然后将其显示在侧面以显示其效果。
My problem was that I had been converting all spaces entered by the user into , I wanted to do this so that spaces could be entered to format text; add indents and the like.
我的问题是我一直在将用户输入的所有空格转换为 ，我想这样做以便可以输入空格来格式化文本；添加缩进等。
The effect, though, was that it was then overflowing instead of wrapping the text inside the div. An easy fix is to instead convert two spaces to , and leave single spaces alone.
但是，效果是它随后溢出而不是将文本包裹在 div 中。一个简单的解决方法是将两个空格转换为 ，并保留单个空格。
I realize that this probably isn't the same cause for everyone else, but I hope it helps someone!
我意识到这对其他人来说可能不是同一个原因，但我希望它可以帮助某人！
回答by Levi Josman
This worked for me...
这对我有用...
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word;
回答by Jason Gennaro
Not entirely sure what you want to do, but overflow:automight be what you are after.
不完全确定你想做什么，但overflow:auto可能是你所追求的。
#absolute_div
{
background-color: #8cc63f;
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
padding: 0px 5px 0px 5px;
width: 144px;
height: 50px;
overflow:auto;
}
回答by ar3
When you use absolute positioning, and set a height and width, the contents have no effect on the box itself, so you just have to set a min-height:50px, and it will grow with the text as appears here in this jsFiddle.
当您使用绝对定位并设置高度和宽度时，内容对框本身没有影响，因此您只需设置一个 min-height:50px，它就会随着出现在此jsFiddle 中的文本而增长。
