How to use "word-wrap:break-word" for a div without specifying width

Question

I have to wrap the text in a div which has the width property set to auto.

I have to take the input from users and have to display it. Sometimes users are inputting data without spaces. Normal strings are wrapping fine so far without any styles. But long strings without spaces are overflowing from the container. Here I want to use the "word-wrap:break-word;" to wrap the text. But it is working when specifying the specific width to the div. But when I specify width my layout is corrupting across the browsers.

Is there any solution to use word-wrap without specifying width property (It should work in all the browsers) ?

Answer 1

Finally I did small change in my layout which given a standard result across all the browsers.

1. Added a table inside my div (Here my table will have only one row & one column).
2. Given the following styles to the table - "table-layout: fixed;width: 100%;word-wrap: break-word;"

Now user input will go into the table & it wraps the small words, breaks the long words if they are overflowing from the container.

Answer 2

Here is another version of using table:

<div class="break-word-container">
    very_long_word_without_spaces
</div>

and here are the styles:

.break-word-container {
    display: table;
    table-layout: fixed;
    width: 100%;
    word-wrap: break-word;
}