html - 嵌套空白的 CSS 问题：正常；空白的父级内部：nowrap；- 父母不再有正确的宽度

Question

我试图弄清楚为什么当我这样做时我的父元素会失去它的宽度？请看我的小提琴：

http://jsfiddle.net/ks3Qu/

HTML

        <h1>white-space: normal; on < a > tag breaks the ul's width but gives desired text effect.</h1>

        <div class="clear">
            <ul>
                <li><a class="no" href="">This This This This This This This This This</a></li>
                <li><a class="no"  href="">This This This This This This This This This</a></li>
                <li><a class="no"  href="">This This This This This This This This This</a></li>
                <li><a class="no"  href="">This This This This This This This This This</a></li>
                <li><a class="no"  href="">This This This This This This This This This</a></li>
                <li><a class="no"  href="">This This This This This This This This This</a></li>
                <li><a class="no"  href="">This This This This This This This This This</a></li>
                <li><a class="no"  href="">This This This This This This This This This</a></li>
                <li><a class="no"  href="">This This This This This This This This This</a></li>
                <li><a class="no"  href="">This This This This This This This This This</a></li>
                <li><a class="no"  href="">This This This This This This This This This</a></li>
                <li><a class="no"  href="">This This This This This This This This This</a></li>
                <li><a class="no"  href="">This This This This This This This This This</a></li>
            </ul>
        </div>




        <h1>white-space: nowrap; is inherited from  < ul > tag to < a > tag now has full width of background (almost?) but loses desired text effect</h1>
        <div class="clear">
            <ul>
                <li><a class="yes" href="">This This This This This This This This This</a></li>
                <li><a class="yes"  href="">This This This This This This This This This</a></li>
                <li><a class="yes"  href="">This This This This This This This This This</a></li>
                <li><a class="yes"  href="">This This This This This This This This This</a></li>
                <li><a class="yes"  href="">This This This This This This This This This</a></li>
                <li><a class="yes"  href="">This This This This This This This This This</a></li>
                <li><a class="yes"  href="">This This This This This This This This This</a></li>
                <li><a class="yes"  href="">This This This This This This This This This</a></li>
                <li><a class="yes"  href="">This This This This This This This This This</a></li>
                <li><a class="yes"  href="">This This This This This This This This This</a></li>
                <li><a class="yes"  href="">This This This This This This This This This</a></li>
                <li><a class="yes"  href="">This This This This This This This This This</a></li>
                <li><a class="yes"  href="">This This This This This This This This This</a></li>
            </ul>
        </div>

CSS

    /* Universal */
    *, *:after, *:before { margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; list-style: none;  }
    * :focus { outline: 0; }

    /* Clear Fix*/
    .clear:before, .clear:after { content: " " !important; display: table !important; }
    .clear:after { clear: both !important; }
    .clear { *zoom: 1 !important; clear: both !important; }

    /* Normal Elements */
    h1 { margin: 2em 0 0; }
    div { width: auto; margin: 0 auto; }
    ul { float: left; white-space: nowrap; background: lime; } /* LIME background shows ul's width */
    li { display: inline-block; max-width: 10em; }

    /* Problem Elements */
    a.no { white-space: normal; } /* Normal breaks width */
    a.yes {  } /* Nowrap fixes ul width (almost?) */

Answer 1

在这种情况下word-wrap: break-word;，可以帮助您编写很长的代码，但很明显，我了解您的需要，这将对您有所帮助。检查这个小提琴并参考这个问题，而且这不是一个父问题padding，左右也清除它。

ul.lisits{
    width:100%;
    overflow:hidden;
}
ul.lisits > li{
    display:inline-block;
}
ul.lisits > li > a{
     word-wrap: break-word;
    overflow-wrap: break-word;
}

另一件事是在固定 div 或 ul 的情况下text-overflow:ellipsis，white-space:nowrap会有所帮助:)