ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT

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

Preventing line break in CSS: Here, we are going to learn how to prevent line breaks in the list of items using CSS?
Submitted by Anjali Singh, on February 01, 2020

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.

How can we prevent 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.

Solution:

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:

    element {
        display:inline-block;
    }

Example:

<!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 Tutorial & Examples »


ADVERTISEMENT



ADVERTISEMENT



Comments and Discussions

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT

Languages: » C » C++ » C++ STL » Java » Data Structure » C#.Net » Android » Kotlin » SQL
Web Technologies: » PHP » Python » JavaScript » CSS » Ajax » Node.js » Web programming/HTML
Solved programs: » C » C++ » DS » Java » C#
Aptitude que. & ans.: » C » C++ » Java » DBMS
Interview que. & ans.: » C » Embedded C » Java » SEO » HR
CS Subjects: » CS Basics » O.S. » Networks » DBMS » Embedded Systems » Cloud Computing
» Machine learning » CS Organizations » Linux » DOS
More: » Articles » Puzzles » News/Updates

© https://www.includehelp.com some rights reserved.