How to prevent text from overflowing in CSS?

Question

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.

You can try:

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

#myDiv {
    overflow:hidden;
}

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

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

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

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

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

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 */