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?
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
7条答案
按热度按时间eaf3rand1#
Use
white-space: nowrap;
[1] [2] or give that link more space by settingli
'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
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:
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:
https://en.wikipedia.org/wiki/Non-breaking_space#Encodings
voase2hg4#
display: inline-block;
will prevent break between the words in a list item:alen0pnh5#
Bootstrap 4 has a class named
text-nowrap
. It is just what you need.0lvr5msh6#
In your CSS, white-space can do the job
n9vozmp47#
<nobr>your text</nobr>
(not css but easier in some cases)