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

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 继承了它们的宽度。如果您知道文本的确切宽度，则可以在其上放置一个确切的宽度属性-

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 */
}