Css hide word overflow

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

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

asked Jul 22, 2009 at 14:02

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, 2010 at 21:16

You can try:

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

#myDiv {
    overflow:hidden;
}

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

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

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

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, 2009 at 14:08

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; 

}

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/

answered Jul 8, 2014 at 4:48

beanbean

1,0811 gold badge12 silver badges23 bronze badges

It’s now the css property:

word-break: break-all

answered Oct 16, 2020 at 11:25

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

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

3xCh1_233xCh1_23

1,4651 gold badge20 silver badges39 bronze badges

GeneGene

10.7k1 gold badge66 silver badges57 bronze badges

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

janDojanDo

233 bronze badges