Best way to have text in one line using bootstrap

Question

I have faced a styling problem. What is the best way to have my text lines in a single line? Screenshot of the problem:

My code is rather simple:

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

Nickolenicks

Guess you either use JavaScript to lower your font-size or use css' overflowproperty. – Ecesis

Lowering font-size would be nice, indeed. But I am trying to replicate a design from a .PSD, how could I use CSS overflow in this case? – Nickolenicks

Answer 1

Using CSS' overflow, your element needs to have somewhat fixed boundries. Since you're writing some plain text and your browser is wrapping that automatically into a new line and your elements boundries are getting exceeded. In order to disable that you'd have to use white-space: nowrap; first. After that you are able to go ahead with overflow by doing overflow: auto;.

Since you need that on all of your li elements, so you don't have to manually check if something is weird or not, you'd do so:

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

Your text shouldn't overflow anymore and you can now scroll inside of your element to show off the missing content. Demo

Ecesis

Answer 2

I would suggest to use this, this code prevents text wrapping as well as it also prevents long text to break other items by adding ellipses at the end if text length goes beyond certain limit.

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

You can see live example as well as other solution here - http://www.tutorialrepublic.com/css-tutorial/css3-text-overflow.php

Micronutrient