CSS的包装在div中
我有一个宽度为250px的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; }
正如安德鲁所说,你的文本应该是这样做的。
有一个我能想到的将以您所build议的方式运行的实例,那就是如果您设置了空白属性。
看看你的CSS没有在以下的地方:
white-space: nowrap
这将导致文本在同一行上继续,直到被换行符中断为止。
好的,我的道歉,不知道是否编辑或者加了标记后(最初没有看到)。
overflow-x属性是导致滚动条出现的原因。 删除它,div将调整到它需要包含所有文本的高度。
或者干脆使用
word-wrap: break-word;
支持IE 5.5+,Firefox 3.5+和WebKit浏览器,例如Chrome和Safari。
如果没有看到呈现的html是什么样子以及在treeview div中的元素上应用了什么风格,那么很难说清楚,但是马上跳出来的东西就是
overflow-x: scroll;
如果你删除了会发生什么?
尝试white-space:normal;
这将覆盖inheritancewhite-space:nowrap;
您可以使用:
overflow-x: auto;
如果在overflow-x中设置了“auto”,则仅当内部尺寸最大的DIV区域时才会显示滚动条
我有点惊讶,不只是这样做。 可以有div内的另一个元素的宽度设置为大于250的东西吗?
只设置宽度和浮动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>
也许有其他的风格来修改外观?