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?

idkwhatsgoingon · Accepted Answer · 2024-03-19 22:40:14Z

1158

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 Mar 19, 2024 at 22:40

idkwhatsgoingon

6891 gold badge5 silver badges25 bronze badges

answered Sep 5, 2009 at 11:48

n1313

21.6k7 gold badges33 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user1106551 Over a year ago

I prevented line break in li items using display: inline;. Maybe this will also help others with similar problems.

Crispen Smith Over a year ago

Its important to be careful with display: inline as it can have side effects. white-space: nowrap; has only the one effect.

user6013886 Over a year ago

In this case text overflow happens. how to prevent that?

Vadim Ovchinnikov · Accepted Answer · 2019-01-21 19:31:40Z

198

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, 2019 at 19:31

Vadim Ovchinnikov

14.1k7 gold badges68 silver badges95 bronze badges

answered Oct 16, 2012 at 11:17

meadowstream

4,1592 gold badges22 silver badges24 bronze badges

1 Comment

JorgeGarza Over a year ago

I was looking for a text clamping solution, but I'll stick to this solution

André Werlang · Accepted Answer · 2019-02-25 14:16:36Z

37

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, 2019 at 14:16

André Werlang

5,9841 gold badge37 silver badges51 bronze badges

answered Aug 10, 2012 at 3:03

ptim

15.8k10 gold badges87 silver badges106 bronze badges

Comments

Alexander van Oostenrijk · Accepted Answer · 2021-08-20 10:36:21Z

21

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

li {
  display: inline-block;
}

edited Aug 20, 2021 at 10:36

Alexander van Oostenrijk

4,7843 gold badges25 silver badges37 bronze badges

answered May 18, 2016 at 10:53

Nadeesh Peiris

3872 silver badges10 bronze badges

1 Comment

GentlePurpleRain Over a year ago

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...

Yevgeniy Afanasyev · Accepted Answer · 2018-06-06 04:31:48Z

5

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

answered Jun 6, 2018 at 4:31

Yevgeniy Afanasyev

42k30 gold badges186 silver badges211 bronze badges

3 Comments

Broda Noel Over a year ago

I'd prefer to avoid recommend using Bootstrap in 2019.

Yevgeniy Afanasyev Over a year ago

@BrodaNoel Why?

asciidude Over a year ago

@YevgeniyAfanasyev It's bloat

PYK · Accepted Answer · 2022-10-17 10:20:16Z

3

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, 2022 at 10:20

PYK

4,42133 silver badges20 bronze badges

1 Comment

Abhi Over a year ago

I think white-space: nowrap should do the trick.

Collectives™ on Stack Overflow

How to prevent line breaks in list items using CSS

6 Answers 6

3 Comments

1 Comment

Comments

1 Comment

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

3 Comments

1 Comment

Comments

1 Comment

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related