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＆＃39; 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将文本放在一行中的最佳方法

2 个答案: