Question

我有一个宽度为250px的div。当innertext比我希望它分解时更宽。 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;
}

Answer 1

正如安德鲁所说，你的文本应该就是这样做的。

我能想到的一个实例会以您建议的方式运行，即如果您设置了空白属性。

看看你的CSS中是否有以下内容：

white-space: nowrap

这将导致文本在同一行继续，直到换行中断。

好的，我道歉，不确定之后是否编辑或添加了标记（最初没有看到它）。

overflow-x属性导致滚动条出现。删除它，div将调整到包含所有文本所需的最高值。

Answer 2

或者只是使用

word-wrap: break-word;

支持IE 5.5 +，Firefox 3.5+和WebKit浏览器，如Chrome和Safari。

Answer 3

尝试white-space:normal;这将覆盖继承white-space:nowrap;

Answer 4

如果没有看到渲染的html看起来像是什么以及哪些样式被应用于treeview div中的元素，那么很难明确地说出来，但是立即跳出来的东西是

overflow-x: scroll;

如果删除它会怎样？

Answer 5

你可以使用：

overflow-x: auto;

如果在overflow-x中设置'auto'，只有在内部大小最大的DIV区域时才会出现滚动

Answer 6

我有点意外，它不仅仅是那样做。 div中是否有另一个元素的宽度设置为大于250？

Answer 7

只设置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>

也许有其他样式可以修改外观？

Answer 8

我发现word-wrap: anywhere是有效的（与另一个答案中提到的word-wrap: break-word相对）。

另请参阅：

What does "anywhere" mean in "word-wrap" css property?

div中的CSS自动换行

8 个答案: