使用 bootstrap 在一行中显示文本的最佳方式

Question

我遇到了样式问题。将我的文本行放在一行中的最佳方法是什么？问题截图：

我的代码比较简单：

<section id="key-features" class="key-features">
        <div class="container">
            <h2>Key Features</h2>
            <div class="col-md-4 col-sm-4 col-xs-12">
                <ul>
                    <li><img src="images/icons/1.png" alt="Atmospheric pressure test"/>Atmospheric pressure test</li>
                    <li><img src="images/icons/compass.png" alt="Altitude monitor"/>Altitude monitor</li>
                    <li><img src="images/icons/alc.png" alt="Temperature"/>Temperature test</li>
                    <li><img src="images/icons/hr.png" alt="Heart rate"/>Heart rate monitor</li>
                    <li><img src="images/icons/shoe.png" alt="Pedometer"/>Pedometer</li>
                </ul>
            </div>
            <div class="col-md-4 col-sm-4 col-xs-12 pull-left">
                <ul>
                    <li><img src="images/icons/food.png" alt="Calorie"/>Calorie</li>
                    <li><img src="images/icons/location.png" alt="Distance"/>Distance</li>
                    <li><img src="images/icons/sleep.png" alt="Sleep monitor"/>Sleep monitor</li>
                    <li><img src="images/icons/bell.png" alt="Sedentary remind"/>Sedentary remind</li>
                    <li><img src="images/icons/drink.png" alt="Water drink remind"/>Water drink remind</li>
                </ul>
            </div>
            <div class="col-md-4 col-sm-4 col-xs-12 pull-left">
                <ul>
                        <li><img src="images/icons/alarm.png" alt="test"/>Alarm remind</li>
                        <li><img src="images/icons/phone.png" alt="Call remind"/>Call remind</li>
                        <li><img src="images/icons/camera.png" alt="Photograph"/>Photograph</li>
                        <li><img src="images/icons/dna.png" alt="Share moments"/>Share moments</li>
                        <li><img src="images/icons/bt.png" alt="Anti-los"/>Anti-lost</li>
                </ul>
            </div>
        </div>
    </section>

Answer 1

使用 CSS' overflow，您的元素需要有固定的边界。由于您正在编写一些纯文本，并且您的浏览器会自动将其换行并超出您的元素边界。为了禁用它，您必须先使用 white-space: nowrap; 。之后，您可以通过 overflow: auto;.

继续溢出

由于您在所有 li 元素上都需要它，因此您不必手动检查是否有异常，您可以这样做：

li {
  overflow: auto;
  white-space: nowrap;
}

您的文本不应再溢出，您现在可以在元素内部滚动以显示缺失的内容。 Demo

Answer 2

我建议使用这个，这个代码可以防止文本换行，如果文本长度超过一定限制，它还可以通过在末尾添加省略号来防止长文本打断其他项目。

li {
    width: 400px; /* change this according to your layout */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

您可以在此处查看实际示例以及其他解决方案 - http://www.tutorialrepublic.com/css-tutorial/css3-text-overflow.php

使用 bootstrap 在一行中显示文本的最佳方式

Best way to have text in one line using bootstrap

css

sentence

twitter-bootstrap