How to Prevent Line Breaks in List Items Using CSS?

Preventing Line Breaks in List Items Using CSS

When creating a menu with list items (li tags), you may encounter an issue where multi-word items, such as a link labeled "Submit resume," wrap to multiple lines due to whitespace between the words. This can disrupt the menu's alignment and readability. To prevent this wrapping, CSS offers a solution.

CSS solution:

Use the white-space: nowrap property. This prevents line breaks within the element's text, keeping it on a single line. By applying this property to the li element containing the multi-word item, you can override the default behavior and force the text to remain on one line.

Alternatively, you can provide more space for the item by increasing the width of the li element using the width property. This will give the text more room to spread out, eliminating the need for line breaks.

Example CSS:

li {
  white-space: nowrap;
}

Example HTML:

<ul>
  <li><a href="#">Submit resume</a></li>
</ul>

By applying these CSS techniques, you can prevent line breaks in list items and maintain a consistent menu layout.

The above is the detailed content of How to Prevent Line Breaks in List Items Using CSS?. For more information, please follow other related articles on the PHP Chinese website!