我有一个宽度为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;
}
正如安德鲁所说,您的文字应该就是这样做的。
我可以想到的一个实例将按照您建议的方式运行,也就是说,如果您设置了空白属性。
看看您的CSS中是否没有以下内容:
white-space: nowrap
这将使文本继续在同一行上,直到被换行符中断为止。
[好的,我很抱歉,不确定以后是否编辑或添加了标记(一开始没有看到)。
overflow-x属性是导致滚动条出现的原因。删除它,然后div将调整到包含所有文本所需的高度。
或简单地使用
word-wrap: break-word;
在IE 5.5 +,Firefox 3.5+和WebKit浏览器(例如Chrome和Safari)中受支持。
尝试white-space:normal;
这将覆盖继承white-space:nowrap;
很难明确地说出来,而无需查看呈现的html的外观以及将什么样式应用于treeview div中的元素,但是马上跳出来的是
overflow-x: scroll;
如果删除该怎么办?
您可以使用:
overflow-x: auto;
如果在overflow-x中设置为'auto',则仅当内部尺寸大于该DIV区域时,滚动才会显示
我有点惊讶,它不只是这样做。 div内是否可以有另一个宽度设置为大于250的元素?
仅设置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>
也许还有其他样式可以修改外观?
[我发现word-wrap: anywhere
有效(与另一个答案中提到的word-wrap: break-word
相反。
另请参见: