- This topic is empty.
-
AuthorPosts
-
September 5, 2009 at 11:47 am #10094rajasekarParticipant
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?September 5, 2009 at 11:48 am #10101n1313ParticipantUse
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 | MDNAugust 10, 2012 at 3:03 am #10099ptimParticipantIf 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 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…
October 16, 2012 at 11:17 am #10100jimmyrareParticipantYou 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; }
May 18, 2016 at 10:53 am #10098nadeesh-peirisParticipantdisplay: inline-block;
will prevent break between the words in a list item:li { display: inline-block; }
June 6, 2018 at 4:31 am #10097yevgeniy-afanasyevParticipantBootstrap 4 has a class named
text-nowrap
. It is just what you need.October 17, 2022 at 10:20 am #10096sergio-mcfly-pykParticipantIn 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
April 22, 2023 at 4:58 am #10095michaelloopParticipant<nobr>your text</nobr>
(not css but easier in some cases) -
AuthorPosts
- You must be logged in to reply to this topic.