How to prevent line breaks in list items using CSS

Question

I m trying to put a link called Submit resume in a menu using a li tag  Because of the whitespace between the two words it wraps to two lines  How to prevent this wrapping with CSS

User · Answer

display  inline-block  will prevent break between the words in a list item   li       display  inline-block

User · Answer

If you want to achieve this selectively  ie  only to that particular link   you can use a non-breaking space instead of a normal space    lt li gt submit amp nbsp resume lt  li gt    https   en wikipedia org wiki Non-breaking space Encodings  edit  I understand that this is HTML  not CSS as requested by the OP  but some may find it helpful

User · Answer

You could add this little snippet of code to add a nice       to the ending of the line if the content is to large to fit on one line   li     overflow  hidden     text-overflow  ellipsis    white-space  nowrap

User · Answer

Bootstrap 4 has a class named text-nowrap  It is just what you need

User · Answer

Use white-space  nowrap  1   2  or give that link more space by setting li s width to greater values      1     3  White Space and Wrapping  the white-space property - W3 CSS Text Module Level 3   2  white-space - CSS  Cascading Style Sheets   MDN

[html] How to prevent line breaks in list items using CSS

Examples related to html

Examples related to css

Examples related to word-wrap