html How to prevent line breaks in list items using CSS

dkqlctbz  于 2023-04-27  发布在  其他
关注(0)|答案(7)|浏览(119)

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?

eaf3rand

eaf3rand1#

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

hrirmatl

hrirmatl2#

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;
}
nkhmeac6

nkhmeac63#

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:

<li>submit&nbsp;resume</li>

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…*
voase2hg

voase2hg4#

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

li {
  display: inline-block;
}
alen0pnh

alen0pnh5#

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

0lvr5msh

0lvr5msh6#

In your CSS, white-space can do the job

  • possible values:*
white-space: nowrap
white-space: pre
white-space: pre-wrap
white-space: pre-line
white-space: break-spaces
white-space: normal
n9vozmp4

n9vozmp47#

<nobr>your text</nobr> (not css but easier in some cases)

相关问题