CSS换行 [英] CSS word-wrapping in div

问题描述

我有一个宽度为250像素的div。当内文比我想要它分解时更宽。 div是float：left，现在有一个溢出。我想使用字包装滚动条去。我如何实现这一点？

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

推荐答案

应该是这样做的。

有一个我可以想到的实例将按照你的建议行为，那就是如果你设置了whitespace属性。

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.

查看您的CSS中是否没有以下内容：

See if you don't have the following in your CSS somewhere:

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).

overflow-x属性是导致滚动条出现的原因。删除该div，div将调整为包含所有文本的高度。

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.

这篇关于CSS换行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！