Html div中的CSS自动换行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/502500/
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
CSS word-wrapping in div
提问by Martijn
I have a div with a width of 250px. When the innertext is wider than that i want it to break down. The div is float: left and now has an overflow. I want the scrollbar to go away by using word-wrapping. How can i achieve this?
我有一个宽度为 250px 的 div。当内部文本比那个宽时，我希望它分解。div 是 float: left 并且现在有溢出。我希望滚动条通过使用自动换行而消失。我怎样才能做到这一点？
<div id="Treeview">
<div id="HandboekBox">
<div id="HandboekTitel">
<asp:Label ID="lblManual" runat="server"></asp:Label>
</div>
<div id="HandboekClose">
<asp:ImageButton ID="btnCloseManual" runat="server"
ImageUrl="Graphics/close.png" onclick="btnCloseManual_Click"
BorderWidth="0" ToolTip="Sluit handboek" />
</div>
</div>
<asp:TreeView ID="tvManual" runat="server" RootNodeStyle-CssClass="RootNode">
<Nodes>
</Nodes>
</asp:TreeView>
</div>
CSS:
CSS：
#Treeview
{
padding-right: 5px;
width: 250px;
height: 100%;
float: left;
border-right: solid 1px black;
overflow-x: scroll;
}
回答by Jayx
As Andrew said, your text should be doing just that.
正如安德鲁所说，你的文字应该这样做。
There is one instance that I can think of that will behave in the manner you suggest, and that is if you have the whitespace property set.
我能想到的一个实例会按照您建议的方式运行，那就是如果您设置了 whitespace 属性。
See if you don't have the following in your CSS somewhere:
看看你的 CSS 中是否没有以下内容：
white-space: nowrap
That will cause text to continue on the same line until interrupted by a line break.
这将导致文本在同一行上继续，直到被换行符中断。
OK, my apologies, not sure if edited or added the mark-up afterwards (didn't see it at first).
好的，我很抱歉，不确定是否在之后编辑或添加了标记（起初没有看到）。
The overflow-x property is what's causing the scroll bar to appear. Remove that and the div will adjust to as high as it needs to be to contain all your text.
overflow-x 属性是导致滚动条出现的原因。删除它，div 将调整到包含所有文本所需的高度。
回答by Jc Figueroa
Or simply use
或者干脆使用
word-wrap: break-word;
supported in IE 5.5+, Firefox 3.5+, and WebKit browsers such as Chrome and Safari.
支持 IE 5.5+、Firefox 3.5+ 和 WebKit 浏览器，如 Chrome 和 Safari。
回答by gordon
try white-space:normal;This will override inheriting white-space:nowrap;
尝试white-space:normal;这将覆盖继承white-space:nowrap;
回答by Andrew
It's pretty hard to say definitively without seeing what the rendered html looks like and what styles are being applied to the elements within the treeview div, but the thing that jumps out at me right away is the
如果没有看到渲染的 html 是什么样子以及将哪些样式应用于树视图 div 中的元素，就很难确定地说出来，但是马上让我想到的是
overflow-x: scroll;
What happens if you remove that?
如果你删除它会发生什么？
回答by Andrew
you can use:
您可以使用：
overflow-x: auto;
If you set 'auto' in overflow-x, scroll will appear only when inner size is biggest that DIV area
如果你在overflow-x中设置了'auto'，只有当DIV区域的内部尺寸最大时才会出现滚动
回答by Andrew
I'm a little surprised it doesn't just do that. Could there another element inside the div that has a width set to something greater than 250?
我有点惊讶它不只是这样做。div 中是否有另一个元素的宽度设置为大于 250？
回答by Aleris
Setting just the width and float css properties would get a wrapping panel. The folowing example work just fine:
仅设置 width 和 float css 属性将获得一个环绕面板。下面的例子工作得很好：
<div style="float:left; width: 250px">
Pellentesque feugiat tempor elit. Ut mollis lacinia quam.
Sed pharetra, augue aliquam ornare vestibulum, metus massa
laoreet tellus, eget iaculis lacus ipsum et diam.
</div>
Maybe there are other styles in place that modify the appearance?
也许还有其他样式可以修改外观？
回答by atomh33ls
I found that word-wrap: anywhereworked (as opposed to word-wrap: break-wordmentioned in another answer).
我发现这word-wrap: anywhere有效（与word-wrap: break-word另一个答案中提到的相反）。
See also:
也可以看看：
