How to prevent text from overflowing in CSS?

Question

How can I prevent text in a div block from overflowing in CSS?

div {
  width: 150px;
  /* what to put here? */
}

<div>This div contains a VeryLongWordWhichDoesNotFitToTheBorder.</div>

why is your text overflowing? – Virat Kadaru Jul 22 '09 at 14:04 — Virat Kadaru, Jul 22 '09 at 14:04
@ViratKadaru ...because it's 360pt Gregorian Chant Serif – DukeDidntNukeEm Mar 16 '18 at 15:35 — DukeDidntNukeEm, Mar 16 '18 at 15:35

score 213 · Answer 1 · answered Sep 24 '10 at 21:16

213

If you want the overflowing text in the div to automatically newline instead of being hidden or making a scrollbar, use the

word-wrap: break-word

property.

answered Sep 24 '10 at 21:16

Alkanshel

4,198
1
35
54

4

[https://developer.mozilla.org/en-US/docs/Web/CSS/word-wrap](https://developer.mozilla.org/en-US/docs/Web/CSS/word-wrap) – Dangerous Oct 10 '14 at 15:37
The user needs to check this as the answer. It worked for me today! Thanks pal! – Eduardo A. Fernández Díaz Aug 22 '19 at 00:58
oh my goodness thank you so much for this one, i've been literally gone crazy bc of some problems that I could solve by your answer!! XD – Sven Jun 10 '20 at 15:14
4

It's now word-break: break-all – Cloud Oct 16 '20 at 11:25

score 88 · Answer 2 · edited Feb 04 '13 at 10:04

88

You can try:

<div id="myDiv">
    stuff 
</div>

#myDiv {
    overflow:hidden;
}

Check out the docs for the overflow property for more information.

edited Feb 04 '13 at 10:04

Peter Grace

569
5
20

answered Jul 22 '09 at 14:04

brettkelly

27,655
8
56
72

58

Those aren't "the docs", that's a web site with some basic information about HTML/CSS. The docs are at w3.org – DisgruntledGoat Jul 22 '09 at 14:42

score 84 · Answer 3 · edited Jan 11 '22 at 21:26

Short Answer

Simply use:

word-wrap: break-word;
white-space: pre-wrap;
word-break: break-word;

Long Answer

1. `word-wrap`

Allows long words to be able to break and wrap onto the next line.

Possible values:

normal: Break words only at allowed break points
break-word: Allows unbreakable words to be broken

div {
    width: 150px; 
    border: 2px solid #ff0000;
}

div.normal {
    word-wrap: normal;
}

div.break {
    word-wrap: break-word;
}

<h2>word-wrap: normal</h2>
<div class="normal"> This div contains a VeryLongWordWhichDoesNotFitToTheBorder.</div>

<h2>word-wrap: break-word</h2>
<div class="break"> This div contains a VeryLongWordWhichDoesNotFitToTheBorder.</div>

2. `white-space`

Specifies how white-space inside an element is handled.

Possible values:

nowrap: Text will never wrap to the next line.
pre-wrap: Whitespace is preserved by the browser. Text will wrap when necessary, and on line breaks

div {
    width: 150px;
    border: 2px solid #ff0000;
}

div.nowrap {
    white-space: nowrap;
}

div.pre-wrap {
    white-space: pre-wrap;
}

<h2>white-space: nowrap</h2>
<div class="nowrap">This div contains a very long but normal paragraph with so many words and nothing else.</div>

<h2>white-space: pre-wrap</h2>
<div class="pre-wrap">This div contains a very long but normal paragraph with so many words and nothing else.</div>

3. `word-break`

Specifies how words should break when reaching the end of a line.

Possible values:

normal: default line break rules.
break-word: To prevent overflow, word may be broken at arbitrary points.

div {
  width: 150px; 
  border: 2px solid #ff0000;
}

div.normal {
  word-break: normal;
}

div.break-word {
  word-break: break-word;
}

<h2>word-break: normal (default)</h2>
<div class="normal"> This div contains a VeryLongWordWhichDoesNotFitToTheBorder.</div>

<h2>word-break: break-word</h2>
<div class="break-word"> This div contains a VeryLongWordWhichDoesNotFitToTheBorder.</div>

For browser-specific versions of white-space, use:

white-space: pre-wrap;      /* CSS3 */
white-space: -moz-pre-wrap; /* Firefox */
white-space: -pre-wrap;     /* Opera <7 */
white-space: -o-pre-wrap;   /* Opera 7 */

Almost 8 years of this great answer not being the accepted one. — daydreamer, Jan 24 '22 at 15:49
In my case `white-space: pre-wrap;` is the only thing that made the overflowing text break for me. Thank you! — Ian Poston Framer, Apr 27 '22 at 17:49

score 62 · Answer 4 · edited Feb 04 '23 at 07:51

You can use the CSS property text-overflow to truncate long texts.

  #greetings
  {
    width: 100px;
    border: 1px red solid;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; // This is where the magic happens
  }

    <div id="greetings">
      Hello universe! 
    </div>

    <div id="greetings">
      Hello universe! 12345678901234567890
    </div>

reference: http://makandracards.com/makandra/5883-use-css-text-overflow-to-truncate-long-texts

score 20 · Answer 5 · answered Jul 22 '09 at 14:08

20

You can control it with CSS, there is a few options :

hidden -> All text overflowing will be hidden.
visible -> Let the text overflowing visible.
scroll -> put scroll bars if the text overflows

Hope it helps.

answered Jul 22 '09 at 14:08

Timothée Martin

775
4
13

score 15 · Answer 6 · edited Dec 24 '12 at 07:48

15

there is another css property :

white-space : normal;

The white-space property controls how text is handled on the element it is applied to.

div {

  /* This is the default, you don't need to
     explicitly declare it unless overriding
     another declaration */
  white-space: normal; 

}

edited Dec 24 '12 at 07:48

palaѕн

72,112
17
116
136

answered Dec 24 '12 at 07:26

Sachin

2,152
1
21
43

1

This is really helpful in combination with overflow:hidden; – koppor Mar 18 '13 at 12:13

score 6 · Answer 7 · answered Jul 08 '14 at 04:48

Try adding this class in order to fix the issue:

.ellipsis {
  text-overflow: ellipsis;

  /* Required for text-overflow to do anything */
  white-space: nowrap;
  overflow: hidden;
}

Explained further in this link http://css-tricks.com/almanac/properties/t/text-overflow/

score 5 · Answer 8 · answered Jul 22 '09 at 14:04

5

overflow: scroll ? Or auto. in the style attribute.

answered Jul 22 '09 at 14:04

bean

1,091
1
12
23

score 5 · Answer 9 · edited Jan 02 '19 at 21:16

5

I guess you should start with the basics from w3

https://www.w3schools.com/cssref/css3_pr_text-overflow.asp

div {
    white-space: nowrap; 
    overflow: hidden;
    text-overflow: ellipsis;
}

edited Jan 02 '19 at 21:16

TylerH

20,799
66
75
101

answered Jun 20 '18 at 10:38

Ronit Oommen

3,040
4
17
25

See [this link](https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow#examples) for an example from MDN – derekbaker783 Mar 24 '21 at 17:56

score 5 · Answer 10 · answered Oct 16 '20 at 11:25

5

It's now the css property:

word-break: break-all

answered Oct 16 '20 at 11:25

Cloud

241
4
10

score 2 · Answer 11 · edited Jan 02 '19 at 21:16

2

.NonOverflow {
    width: 200px; /* Need the width for this to work */
    overflow: hidden;
}

<div class="NonOverflow">
    Long Text
</div>

edited Jan 02 '19 at 21:16

TylerH

20,799
66
75
101

answered Jul 22 '09 at 14:05

Kirtan

21,295
6
46
61

in multilingual text other than, it causes some characters of long words be hidden from display. – Bhupi Sep 25 '10 at 13:16

score 1 · Answer 12 · answered Jul 22 '09 at 15:32

If your div has a set height in css that will cause it to overflow outside of the div.

You could give the div a min-height if you need to have it be a minimum height on the div at all times.

Min-height will not work in IE6 though, if you have an IE6 specific stylesheet you can give it a regular height for IE6. Height changes in IE6 according to the content within.

score 1 · Answer 13 · answered Oct 04 '16 at 15:41

1

You can just set the min-width in the css, for example:

.someClass{min-width: 980px;}

It will not break, nevertheless you will still have the scroll-bar to deal with.

answered Oct 04 '16 at 15:41

3xCh1_23

1,491
1
20
39

score 1 · Answer 14 · answered Dec 01 '17 at 00:15

Recommendations for how to catch which part of your CSS is causing the issue:

1) set style="height:auto;" on all the <div> elements and retry again.

2) Set style="border: 3px solid red;" on all the <div> elements to see how wide of an area your <div>'s box is taking up.

3) Take away all the css height:#px; properties from your CSS and start over.

So for example:

<div id="I" style="height:auto;border: 3px solid red;">I
    <div id="A" style="height:auto;border: 3px solid purple;">A
        <div id="1A" style="height:auto;border: 3px solid green;">1A
        </div>
        <div id="2A" style="height:auto;border: 3px solid green;">2A
        </div>
    </div>
    <div id="B" style="height:auto;border: 3px solid purple;">B
        <div id="1B" style="height:auto;border: 3px solid green;">1B
        </div>
        <div id="2B" style="height:auto;border: 3px solid green;">2B
        </div>
    </div>
</div>

score 0 · Answer 15 · answered Apr 07 '20 at 10:47

!! Hard coded tradoff ahead !! Depending on the surrounding code and the screen resolution this could lead to different / unwanted behaviour

If hidden overflow is out of the question and correct hyphenation is needed you could use the soft hyphen HTML entity where you want the word / text to break. This way you are able to predetermine a breaking point manually.

&shy;

The hyphen will only appear when the word needs to break to not overflow its surrounding container.

Example:

<div class="container">
  foo&shy;bar
</div>

Result if the container is wide enough and the text would not overflow the container:

foobar

Result if the container is to small and the text would actually overflow the container:

foo-
bar

.container{
  background-color: green;
  max-width: 30px;
}

Example 1 - container to small => text overflows container:

<div class="container">
  foobar
</div>

Example 2 - using soft hyphen => text breaks at predetermined break point:

<div class="container">
  foo&shy;bar
</div>

Example 3 - using soft hyphen => text still overflowing because the text before the soft hyphen is to long:

<div class="container">
  foobar&shy;foo
</div>

Further information: https://en.wikipedia.org/wiki/Soft_hyphen

How to prevent text from overflowing in CSS?

15 Answers15

Short Answer

Long Answer

1. `word-wrap`

2. `white-space`

3. `word-break`

Linked

Related

How to prevent text from overflowing in CSS?

15 Answers15

Short Answer

Long Answer

1. word-wrap

2. white-space

3. word-break

Linked

Related

1. `word-wrap`

2. `white-space`

3. `word-break`