How to prevent line breaks in the list of items using CSS?

CSS | Preventing line breaks: In this tutorial, we will learn how to prevent line breaks in the list of items using CSS. By Anjali Singh Last updated : July 10, 2023

Introduction

Dealing with various items in CSS sometimes pose very different problems. The problem could be anything, it could be related to positioning, arrangement, and whatnot, therefore all such kinds of problems require smart and creative solutions. Solutions are considered best if they do not increase the line of codes instead optimize the entire code in a much more efficient manner simultaneously resolving the issue. Such solutions are known to be good solutions but not everyone can come up with solutions, although one should keep trying. However, even if you don't, these articles are always out there for your convenience in just one click away. Now, let us take this discussion further and talk about the above-mentioned topic.

Preventing line breaks in the list of items using CSS

Well, many developers come across this question at one point in their developing period. The problem might seem tricky and confusing but the solution is very easy to understand and you will be able to learn it in no time. As said earlier, dealing with a list of items can prove to be tricky, therefore such types of problems tend to occur. Besides, it would be very good if we can prevent line breaks in a list of items and that too with the help of CSS. So let us get right on to the solution and get it over with.

CSS property to prevent line breaks in the list of items

The property in play here, to tackle this problem would be display:inline-block property. This property is used to display any element in the inline-level block container. This property plays a role of converting the block of elements into an inline element. You may use height and width property to set or fix an inline element. Therefore, this display property plays a major role in preventing the line break in a list of items using CSS.

Syntax to prevent line breaks in the list of items

    element {
        display:inline-block;
    }

Example to prevent line breaks in the list of items

<!DOCTYPE html>

<html>

<head>
    <style>
        li {
            display: inline-block;
            text-decoration: underline;
        }
        
        body {
            width: 70%;
        }
    </style>
</head>

<body>
    <h2>Prevent line breaks in list</h2>
    <b>Languages on IncludeHelp:</b>
    <ul>
        <li>C++</li>
        <li>Java </li>
        <li>Python</li>
        <li>Scala</li>
        <li>Android</li>
    </ul>
</body>

</html>

Output

prevent line breaks in the list of items using CSS

In the above example, there is no new line for each list.

Ending note:

So, as you saw by making use of display property you can prevent the line breaks in a list of items using CSS. Pretty easy solution right? Told you! All you gotta do is make use of one single property and voila, problem solved. This way line breaks won’t bother you ever again whenever you are creating a certain list of items and your code doesn’t get altered much. So what are you waiting for now? You have the solution, so go ahead and try this out this method.

CSS Examples »

How to hide scroll bar while scrolling using CSS?

How to remove iframe borders using CSS?