[英]CSS issue with nesting white-space: normal; inside parent of white-space: nowrap; - Parent no longer has correct width
I'm trying to figure out why my parent element loses it's width when I do this? 我试图弄清楚为什么我的父元素在这样做时会失去它的宽度? Please see my fiddle:
请看我的小提琴:
http://jsfiddle.net/ks3Qu/ http://jsfiddle.net/ks3Qu/
HTML 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 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?) */
In this case word-wrap: break-word;
在这种情况下,
word-wrap: break-word;
helps you you have very long code but its clear i understand your need this will help you. 可以帮助您拥有非常长的代码,但是很清楚,我了解您的需求,这将对您有所帮助。 check this fiddle and refer this question moreover which is not a parent problem
padding
left right also clear it. 检查这个小提琴,并参考这个问题 ,这不是一个父母的问题,左,右
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;
}
other thing is in case of fixed div or ul text-overflow:ellipsis
and white-space:nowrap
will help :) 其他问题是在固定div或ul
text-overflow:ellipsis
和white-space:nowrap
将有所帮助:)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.