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?

score 1093 · Accepted Answer · edited May 29 '20 at 07:42

1093

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

edited May 29 '20 at 07:42

Wolf

9,679
7
62
108

answered Sep 05 '09 at 11:48

n1313

20,555
7
31
46

6

I prevented line break in li items using `display: inline;`. Maybe this will also help others with similar problems. – Oct 03 '13 at 13:24
3

Its important to be careful with display: inline as it can have side effects. white-space: nowrap; has only the one effect. – Crispen Smith Aug 10 '15 at 03:51
In this case text overflow happens. how to prevent that? – Mar 28 '16 at 14:08

score 181 · Answer 2 · edited Jan 21 '19 at 19:31

181

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

edited Jan 21 '19 at 19:31

Vadim Ovchinnikov

13,327
5
62
90

answered Oct 16 '12 at 11:17

JimmyRare

3,958
2
20
23

I was looking for a text clamping solution, but I'll stick to this solution – JorgeGarza Dec 27 '16 at 16:49

score 38 · Answer 3 · edited Feb 25 '19 at 14:16

38

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…

edited Feb 25 '19 at 14:16

André Werlang

5,839
1
35
49

answered Aug 10 '12 at 03:03

ptim

14,902
10
83
103

score 20 · Answer 4 · edited Aug 20 '21 at 10:36

20

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

li {
  display: inline-block;
}

edited Aug 20 '21 at 10:36

Alexander van Oostenrijk

4,644
3
23
37

answered May 18 '16 at 10:53

Nadeesh Peiris

349
2
9

1

If I click through to the jsfiddle and adjust the width of the output, the individual list items break between the word "list" and the number, which is exactly what the OP *doesn't* want... – GentlePurpleRain Jan 24 '18 at 20:39

score 5 · Answer 5 · answered Jun 06 '18 at 04:31

5

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

answered Jun 06 '18 at 04:31

Yevgeniy Afanasyev

37,872
26
173
191

4

I'd prefer to avoid recommend using Bootstrap in 2019. – Broda Noel Feb 06 '19 at 18:22
6

@BrodaNoel Why? – Yevgeniy Afanasyev Feb 07 '19 at 03:19
@YevgeniyAfanasyev It's bloat – asciidude Nov 02 '22 at 23:01

score 1 · Answer 6 · answered Oct 17 '22 at 10:20

1

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

answered Oct 17 '22 at 10:20

PYK

3,674
29
17

score 0 · Answer 7 · answered Apr 22 '23 at 16:58

0

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

answered Apr 22 '23 at 16:58

michaelloop

73
6

How to prevent line breaks in list items using CSS

7 Answers7

Linked

Related