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;
}

标签： csstwitter-bootstrap

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