为什么文字在超过一定数量会自动换行？

Question

代码如下，效果如下图，文字超过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;
}

Answer 1

因为你变相设定了容器的最大宽度! 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;
}