大佬教程收集整理的这篇文章主要介绍了css – 忽略了nowrap的Firefox文本溢出(Chrome工作),大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
这适用于Firefox v33和v33.1,但是在34-35中失败了.这适用于Chrome和IE11.它可能是Firefox中的一个错误,但我不确定.基本上我有HTML看起来像这样:
.container { position: absolute; width: 150px; } .innercontainer { position: relative; padding-right: 25px; margin-bottom: 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .outerwrapper { display: block; height: 24px; text-align: center; font-size: 10px; line-height: 24px; margin-bottom: 5px; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; box-orient: horizontal; -webkit-box-orient: horizontal; flex-direction: normal; -ms-flex-direction: normal; -moz-flex-direction: normal; -webkit-flex-direction: normal; } .wrapper { flex: 1; -ms-flex: 1 0 auto; -moz-flex: 1; -webkit-flex: 1; -webkit-box-flex: 1; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; box-orient: horizontal; -webkit-box-orient: horizontal; flex-direction: normal; -ms-flex-direction: normal; -moz-flex-direction: normal; -webkit-flex-direction: normal; BACkground-color: grey; } .wrapper span { display: block; flex: 1; -ms-flex: 1; -moz-flex: 1; -webkit-flex: 1; -webkit-box-flex: 1; text-align: left; font-size: 10px; padding: 0 5px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; color: #FFFFFF; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
<div class="container"> <div class="innercontainer"> <section class="outerwrapper"> <div class="wrapper"> <span> super long String in here super long String in here super long String in here </span> </div> </section> </div> </div>
对已经定型的CSS表示歉意;它在一个更大的Web应用程序中,它必须是这样的.
在Chrome中,你会得到“超长字符串……”,在Firefox中它只显示整个字符串.
除了之外,该自动值计算为0
在您的情况下,主轴是水平轴.因此,如果将overflow-x设置为除可见之外的任何值,则min-width将计算为0,这是引入auto之前的初始值.
例如,
.wrapper { overflow: hidden; }
.container { position: absolute; width: 150px; } .innercontainer { position: relative; padding-right: 25px; margin-bottom: 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .outerwrapper { display: block; height: 24px; text-align: center; font-size: 10px; line-height: 24px; margin-bottom: 5px; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; box-orient: horizontal; -webkit-box-orient: horizontal; flex-direction: normal; -ms-flex-direction: normal; -moz-flex-direction: normal; -webkit-flex-direction: normal; } .wrapper { flex: 1; -ms-flex: 1 0 auto; -moz-flex: 1; -webkit-flex: 1; -webkit-box-flex: 1; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; box-orient: horizontal; -webkit-box-orient: horizontal; flex-direction: normal; -ms-flex-direction: normal; -moz-flex-direction: normal; -webkit-flex-direction: normal; BACkground-color: grey; overflow: hidden; } .wrapper span { display: block; flex: 1; -ms-flex: 1; -moz-flex: 1; -webkit-flex: 1; -webkit-box-flex: 1; text-align: left; font-size: 10px; padding: 0 5px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; color: #FFFFFF; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
<div class="container"> <div class="innercontainer"> <section class="outerwrapper"> <div class="wrapper"> <span> super long String in here super long String in here super long String in here </span> </div> </section> </div> </div>
以上是大佬教程为你收集整理的css – 忽略了nowrap的Firefox文本溢出(Chrome工作)全部内容,希望文章能够帮你解决css – 忽略了nowrap的Firefox文本溢出(Chrome工作)所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。