One line text makes div scroll horizantally

Question

If text is one line and too long and whitout any white space makes the div scroll horizontally but i want it to be shown in two or more lines is there any css tricks to make it so?

Answer 1

Keep in mind that you make it compatible for al browsers

.wrapword{
white-space: -moz-pre-wrap !important;  /* Mozilla, since 1999 */
white-space: -webkit-pre-wrap; /*Chrome & Safari */ 
white-space: -pre-wrap;      /* Opera 4-6 */
white-space: -o-pre-wrap;    /* Opera 7 */
white-space: pre-wrap;       /* css-3 */
word-wrap: break-word;       /* Internet Explorer 5.5+ */
word-break: break-all;
white-space: normal;
}

Answer 2

You can use the word-wrap, overflow-wrap and word-break CSS properties:

.dont-break-out {

  /* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;

  -ms-word-break: break-all;
  /* This is the dangerous one in WebKit, as it breaks         things wherever */
  word-break: break-all;
   /* Instead use this non-standard one: */
   word-break: break-word;

   /* Optional: Adds a hyphen where the word breaks, if supported (No Blink) */
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
   hyphens: auto;

}

Source: https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/

Short version:

.dont-break-out {
     word-wrap: break-word;
}

Source: http://www.w3schools.com/cssref/css3_pr_word-wrap.asp

Answer 3

use this class for that div

.wrap { 
   white-space: pre-wrap;      /* CSS3 */
   white-space: -moz-pre-wrap; /* Firefox */
   white-space: -pre-wrap;     /* Opera <7 */
   white-space: -o-pre-wrap;   /* Opera 7 */
   word-wrap: break-word;      /* IE */
}