div 中的 CSS 自动换行
我有一个宽度为 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：
#Treeview
{
padding-right: 5px;
width: 250px;
height: 100%;
float: left;
border-right: solid 1px black;
overflow-x: scroll;
}
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?
<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:
#Treeview
{
padding-right: 5px;
width: 250px;
height: 100%;
float: left;
border-right: solid 1px black;
overflow-x: scroll;
}
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（8）
正如安德鲁所说，你的文字应该就是这样做的。
我可以想到一个实例，它将按照您建议的方式运行，那就是如果您设置了空白属性。
看看你的 CSS 中是否没有以下内容：
这将导致文本在同一行上继续，直到被换行符中断。
好的，我很抱歉，不确定之后是否编辑或添加了标记（一开始没有看到）。
Overflow-x 属性是导致滚动条出现的原因。 删除它，div 将调整到包含所有文本所需的高度。
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.
See if you don't have the following in your CSS somewhere:
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.
或者直接使用
IE 5.5+、Firefox 3.5+ 和 WebKit 浏览器（例如 Chrome 和 Safari）支持的浏览器。
Or simply use
supported in IE 5.5+, Firefox 3.5+, and WebKit browsers such as Chrome and Safari.
尝试
white-space:normal;这将覆盖继承white-space:nowrap;try
white-space:normal;This will override inheritingwhite-space:nowrap;在没有看到渲染的 html 是什么样子以及树视图 div 中的元素应用了哪些样式的情况下，很难明确地说，但我立即想到的是
如果删除它会发生什么？
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
What happens if you remove that?
你可以使用：
如果在overflow-x中设置“auto”，则仅当内部尺寸最大为DIV区域时才会出现滚动
you can use:
If you set 'auto' in overflow-x, scroll will appear only when inner size is biggest that DIV area
我有点惊讶它不只是这样做。 div 内是否还有另一个宽度设置为大于 250 的元素？
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?
仅设置 width 和 float css 属性将得到一个环绕面板。
下面的示例工作得很好：
也许还有其他样式可以修改外观？
Setting just the width and float css properties would get a wrapping panel.
The folowing example work just fine:
Maybe there are other styles in place that modify the appearance?
我发现
word-wrap: Anywhere有效（与另一个答案中提到的word-wrap: break-word相反）。另请参阅：
“自动换行”中的“任何地方”是什么意思“CSS属性？
I found that
word-wrap: anywhereworked (as opposed toword-wrap: break-wordmentioned in another answer).See also:
What does "anywhere" mean in "word-wrap" css property?