调整浏览器窗口大小时如何使文本自动堆叠

Question

我的问题是，当我调整浏览器窗口的大小时，第一个文本破裂了。它永远都不要拆开单词，无论窗口有多小，只要显示整句。我已经尝试过查询，但是找不到正确的方法。请查看图片以了解问题。

<div class="row">
    <div class="col-sm-7">
        <ul class="list-inline">
            <h2>
                <li class="list-inline-item">LYD</li>
                <li class="list-inline-item">&#9702;</li>
                <li class="list-inline-item">LYS</li>
                <li class="list-inline-item">&#9702;</li>
                <li class="list-inline-item">LED</li>
                <li class="list-inline-item">&#9702;</li>
                <li class="list-inline-item">AV</li>
            </h2>
        </ul>
    </div>

    <br>

    <div class="col-sm-5">
        <div class="middle">
            <h2>
                <span class="glyphicon glyphicon-earphone"></span> 57 67 18 14
            </h2>
      </div>
    </div>

</div>

CSS：

ul li { display: inline; }

ul.list-inline{
    text-align: center;
    padding-right: 15px;
}

.middle{
    margin-bottom: 60px;
    padding-right: 15px;
}

Answer 1

这里的主要问题是内容（即列表和列表项）全部从包含col-7的宽度继承。 如果您知道文本的确切宽度，则可以在其上放置确切的width属性-

ul {
    width: 302px;
}

不过，您可以以更动态的方式使用white-space或max-content

/* white-space */ 
ul {
    white-space: nowrap
}

/* max-content*/
ul.list-inline {
    width: intrinsic;           /* Safari/WebKit uses a non-standard name */
    width: -moz-max-content;    /* Firefox/Gecko */
    width: -webkit-max-content; /* Chrome */
}