css - 为什么文字在超过一定数量会自动换行?
本文介绍了css - 为什么文字在超过一定数量会自动换行?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
代码如下,效果如下图,文字超过11,自动换行,而没有把容器撑开,容器width:auto,为什么?
<div id="easy-toast-default" transition="fade" class="et-wrapper et-center-middle fade-leave-to">
<span class="et-content">所有项目都在上面了,啦啦啦,类诶诶诶看fasdffdsfdsfsdfsdsfd!</span>
</div>
.et-wrapper.et-center-middle {
top: 45%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
.et-wrapper {
position: fixed;
top: 80%;
}
.et-wrapper {
background-color: rgba(48, 45, 55, 0.701961);
display: block;
color: white;
z-index: 9999;
text-align: center;
border-radius: 10px;
padding: 0.42667rem 0.64rem;
}
解决方案
因为你变相设定了容器的最大宽度! left: 50%
已经相当于设定容器最大宽度为父容器的50%,当文字长度把container宽度撑到最大限制(50%)之后,文字肯定要换行了。
想要居中显示文字,尽可能显示为一行,可以使用下面的方式
思路是: wrapper是个fixed的宽度为100%的块元素, 里面的内容span设定display: inline-block
、 margin:0 auto
, 这样就能完美解决你遇到的问题。
.et-wrapper span {
display: inline-block;
margin: 0 auto;
background-color: rgba(48, 45, 55, 0.701961);
border-radius: 10px;
padding: 0.42667rem 0.64rem;
}
.et-wrapper {
position: fixed;
width: 100%;
top: 45%;
display: block;
color: white;
z-index: 9999;
text-align: center;
}
这篇关于css - 为什么文字在超过一定数量会自动换行?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文