div 内容不受 div 宽度限制答案

【问题标题】：Content of div not restricted by div widthdiv 内容不受 div 宽度限制
【发布时间】：2010-08-27 00:38:59
【问题描述】：

我可以发誓我已经看过关于这个问题的文章，但我再也找不到它们了！基本上如果我有

<div style="width: 250px;">The width of this div should be no less than 250px wide</div>

在下面的代码中，div 中的内容并未将其宽度限制为指定的宽度，从而导致溢出问题：

        <div class="PostIt">
            <div id="tags"><span class="qExtraLarge"><a href="Team/Default.aspx#lucky">Lucky Khumalo</a></span>
            <span class="qLarge"><a href="Investments/Social/School/Default.aspx">School</a></span>
            a;orghaepoht8aegae[hgi'aehg[ahgiha[e8gjaerghuoaeir'ghu;dsOsgh;vrwi/jbvh?URbnIRWhb'a[985h[qygherionhbdl</div>

        </div>

.PostIt { display: block; text-align: left; padding: 30px 30px 30px 30px; height: 240px !important; width: 190px !important; background: transparent url("Images/PostIt.png"); }
.PostIf #tags { width: 250px !important; }

任何建议都会很棒！

提前致谢。

【问题讨论】：

标签： css html width

【解决方案1】：

如果你想隐藏任何溢出的内容，请使用overflow:hidden;

如果您想显示内容并强制换行，请使用word-wrap:break-word;

【讨论】：

看来word-wrap: break-word; 没有帮助。我完全没有看到任何区别（使用 Google Chrome），但是当我为块设置边距时确实注意到了变化......
为我工作。谢谢！

【解决方案2】：

仅在块元素上设置宽度不会阻止任何比该宽度更宽的内容溢出元素的边界。为此，您还需要设置“溢出”属性。将其设置为“隐藏”只会隐藏边界之外的任何内容，但您也可以将其设置为其他值以自动显示滚动条等。

请参阅http://reference.sitepoint.com/css/overflow 以获得关于溢出 CSS 属性的详细说明。

【讨论】：

隐藏溢出或滚动条都不够好，我需要为内容设置自动换行
是的，不间断的长“词”总是会对您的布局造成严重破坏。 word-wrap 属性在 CSS 3 中，但已经得到很好的支持（实际上是 MS 不久前发明的）。

【解决方案3】：

隐藏你的溢出。

或者更准确地说

.myclass { overflow: hidden; }

【讨论】：