103

我有一个宽度为 250 像素的 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;
}
4

8 回答 8

111

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

我可以想到一个实例会按照您建议的方式运行，那就是如果您设置了 whitespace 属性。

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

white-space: nowrap

这将导致文本在同一行上继续，直到被换行符打断。

好的，我很抱歉，不确定之后是否编辑或添加了标记（一开始没看到）。

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

于 2009-02-02T08:24:25.443 回答
102

或者干脆使用

word-wrap: break-word;

在 IE 5.5+、Firefox 3.5+ 和 WebKit 浏览器（例如 Chrome 和 Safari）中受支持。

于 2011-12-06T19:16:22.070 回答
21

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

于 2017-03-29T20:01:22.077 回答
8

如果没有看到呈现的 html 看起来像什么以及将什么样式应用于树视图 div 中的元素，很难明确地说出来，但我马上跳出来的是

overflow-x: scroll;

如果你删除它会发生什么？

于 2009-02-02T08:27:11.990 回答
3

您可以使用：

overflow-x: auto;

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

于 2009-03-04T19:51:35.770 回答
2

我有点惊讶它不只是这样做。div 内是否还有另一个元素的宽度设置为大于 250？

于 2009-02-02T08:14:38.913 回答
1

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

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

于 2009-02-02T08:17:27.440 回答
0

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

也可以看看：

“自动换行” CSS 属性中的“任何地方”是什么意思？

于 2019-09-26T05:21:08.633 回答