嵌套空白的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;幫助你，你有很長的代碼，但它清楚，我明白你的需要這將幫助你。檢查這個fiddle並且參考這個question而且這不是一個父親問題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; 
} 

的事情是在固定的股利或UL text-overflow:ellipsis和white-space:nowrap的情況下，將幫助:)