div中的CSS换行


100

我有一个宽度为250px的div。当内部文本比那更宽时,我希望它分解。div是float:左侧,现在有一个溢出。我希望滚动条通过使用自动换行而消失。我怎样才能做到这一点?

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

Answers:


110

正如安德鲁所说,您的文字应该就是这样做的。

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

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

white-space: nowrap

这将导致文本继续在同一行上,直到被换行符中断为止。

好的,抱歉,不确定之后是否编辑或添加了标记(一开始没有看到)。

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


你是对的。treeview是由Microsoft构建的,当我检查源代码时,到处都是空白:使用了nowrap
Martijn,2009年

啊好。PhoneGap + jquery mobile产生了很多样式可供选择。通过添加“空白:正常;溢出:自动;” 那把我整理出来了。
Michael Blankenship 2015年

2
尝试white-space:normal;使用您的元素覆盖white-space: nowrap从其父元素继承的内容
戈登


19

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


8

很难确切地说不看呈现的html的样子,以及将什么样式应用于treeview div中的元素,这是很难的,但是马上跳出来的是

overflow-x: scroll;

如果删除该怎么办?


然后,文本越过了边界
Martijn,2009年

3

您可以使用:

overflow-x: auto; 

如果您在overflow-x中设置了“自动”,则仅当内部尺寸大于该DIV区域时,滚动才会显示


2

我有点惊讶,它不仅会这样做。div内是否可以有另一个宽度设置为大于250的元素?


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>

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


没用 在我的div中,我使用超链接。也许与它有关?
马丁

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.