CODEWITHSUNDEEP
htmlcss
Awesome
Awesome

Reputation: 6609

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

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) ?

Upvotes: 19

Views: 26708

Answers (6)

siva surya
siva surya

Reputation: 691

For my case the below css did the job instead of word-wrap

word-break: break-word;
width: auto;

Upvotes: 1

Tomasz Szymulewski
Tomasz Szymulewski

Reputation: 2073

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;
}

Upvotes: 20

satyajit rout
satyajit rout

Reputation: 1651

use overflow-wrap: break-word; it'll work for further reference u can check here

Upvotes: 1

Awesome
Awesome

Reputation: 6609

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.

Upvotes: 18

Paul Lo
Paul Lo

Reputation: 6138

I use the following styles for my web applications and they work fine in different browsers.

.longText {
word-break: break-all;
white-space: -moz-pre-wrap; /* Mozilla */
white-space: -o-pre-wrap; /* Opera 7 */
    white-space: pre-wrap;  /* CSS 2.1 */
white-space: pre-line; /* CSS 3 */
word-wrap: break-word; /* IE */
}

.longTextWrapper td {
white-space: pre-line;
}

Hope it would help you as well.

  <fieldset style="overflow: auto;width:100%">  
   <h:panelGrid columns="1" styleClass="longTextWrapper ">
     <h:outputText styleClass="longText" value="this is a very long messageeeeeeeeeeeeeeeeeeee...."  />
   </h:panelGrid>
  </fieldset>

Upvotes: 3

Jitendra Mehta
Jitendra Mehta

Reputation: 17

You can use "div{word-wrap:break-word; width:auto; display:inline;}". It will break the work if there is not enough space. It will work on all browsers.

Upvotes: 0

Related Questions