How to Prevent Line Breaks in List Items with Links?

Preventing Line Breaks in List Items with CSS

When incorporating links with multiple words into a menu list (e.g., <li> tags), whitespace can cause line wrapping. This issue can be resolved using CSS techniques.

Solution:

To prevent line wrapping in list items, utilize the following CSS property:

white-space: nowrap;

This property instructs the browser not to wrap lines within the element, ensuring that the entire text remains on one line.

Example:

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

<style>
  ul li {
    white-space: nowrap;
  }
</style>

Alternatively, you can provide more space for the link by adjusting the width of the <li> element:

li {
  width: 150px;
}

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