Word overflowing in div

Question

I am working on a khmer site, I dont know the language, the words are too long. I am trying to fit them in div but they are over flowing. Is there a way that the part of word comes down automatically such that it fits in the div, and over flow part is in next line.

I dont know what to do with it, please help.

Find the image in the attachment

Answer 1

You should use the word-wrap property of CSS to force the text to stay inside div without overflowing.

word-wrap: break-word

See the DEMO here

Check without this property and with it to see the difference.

Answer 2

See if this works - word-wrap: break-word;

Answer 3

Use the word-wrap CSS property:

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

Answer 4

You can give the below CSS style to the div to prevent the div text from overflowing.

div {
     word-wrap: break-word;
    }

Answer 5

There is an CSS Attribute for "text overflow" inside HTML Objects

You can do somesthing like that to prevent an overflow by default.

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

reference at W3School

Please note that text-overflow property only occurs when the containers overflow property has the value hidden, scroll or auto.

If you want to warp the long words in multiple lines instead of just "cutting" them you may use "word-wrap: break-word;" which causes the Browser to split long words. (reference)

Please note that both specs are widely supported but very old browsers may ignore them. You can see details in the references.