div中的CSS自动换行

Posted 2023-02-19

技术标签:

【中文标题】div中的CSS自动换行【英文标题】：CSS word-wrapping in div 【发布时间】：2010-10-04 21:19:18 【问题描述】：

我有一个宽度为 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;

【问题讨论】：

【参考方案1】：

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

【讨论】：

【参考方案2】：

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

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

【讨论】：

它不起作用。在我的 div 中，我使用超链接。也许这与它有关？【参考方案3】：

正如 Andrew 所说，您的文本应该是这样做的。

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

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

white-space: nowrap

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

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

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

【讨论】：

你是对的。树视图是由微软构建的，当我检查源代码时，到处都是空格：使用 nowrap 啊，很好。 PhoneGap + jquery mobile 的结果有很多样式可供排序。通过添加“空白：正常；溢出：自动；”这解决了我的问题。尝试在您的元素上使用 white-space:normal; 以覆盖从其父元素继承的 white-space: nowrap【参考方案4】：

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