break-word CSS

Jon Larborn

Hi, I have struggled with word wrap for long file names in a table. I use a class where I now implemented everything I can think has something to do with word wrap. It works in chrome but neither in Firefox or IE. How to do this?

.wraptext
{
word-wrap: break-word; /* Internet Explorer 5.5+ */
max-width: 450px;
mso-word-wrap: break-word;

-ms-word-break: break-all;
word-break: break-all;
-ms-word-wrap: break-word;
word-wrap: break-word; /\* Internet Explorer 5.5+ \*/
white-space: pre-wrap; /\* css-3 \*/
white-space: -moz-pre-wrap; /\* Mozilla, since 1999 \*/
white-space: -pre-wrap; /\* Opera 4-6 \*/
white-space: -o-pre-wrap; /\* Opera 7 \*/

}

vbmike

Not knowing what string you were using or what you expected to see, I just put some lorem ipsum within a table and changed the css class to:

.wraptext
{
word-wrap: normal; /* Internet Explorer 5.5+ */
width: 450px;
mso-word-wrap: normal;

-ms-word-break: normal;
word-break: normal;
-ms-word-wrap: normal;
word-wrap: normal; /\* Internet Explorer 5.5+ \*/

}

All major browsers made the table look the same for me after the changes. Notice I changed the values to "normal". This will make words break so they are readable and not between letters which looks weird to me. Leaving max-width in the class, browsers Opera and Safari did not care for and rendered the table at 100% regardless of max-width setting. If you need responsive design you will have to research the max-width thing. Removing the white space settings allowed for the text in the table cells to look better. Again, not knowing what exact result you were aiming at this is what I experimented with and found.

vbmike

Jon Larborn

I always want a word to break when it exceeds the maximum width. The normal break did not work.

gilvani

I have the same problem. :doh:

Jon Larborn

I did it on the server-side instead. Not a good solution but a workaround

vbmike

Give me an idea of the content you are trying to use and what you want it to look like.

vbmike

Jon Larborn

any long word breaked in a table cell.

vbmike

Just so I understand so I can experiment, you want the word within the cell to wrap when the word gets over 450 but the cell may be bigger?

vbmike

Jon Larborn

I did som experiments my self. If you have an width on a table or cell in a table it wont word wrap. However, if you create a

paragraph in your cell it will wrap. Strange behavior. especially when it works in chrome.

Jon Larborn

This dose not work. normal do not break words. look at my later answer to this question.

vbmike

Well, I suppose that you will have to use paragraph tag for your text. I tried that with some text within a paragraph tag in a fixed width table and your css code above and it wraps the text at max-width specified when the table is wider regardless of browser for me. Opera, Safari, Chrome, Firefox and even IE9. I guess I am not much help, sorry. Maybe someone else can.

vbmike

Lost User

Break word is understood by most, if not all, modern CSS3 enabled browsers. But to make it effective, use a div tag with or without an ID name, then reference that div or the div's ID with a width size, then when you use that break word to another element within the hierachy then it will do what you expect it to. An example ... http://webdesignerwall.com/tutorials/word-wrap-force-text-to-wrap[^]

Jon Larborn

That is not more efficient than any other solution. The only conclusion that I can draw from this matter is that: word-wrap: break-word; will break words when it enters its containers boundery. However, for most browsers this do not work for a table cells boundary The boundary is set either by "width: 100px;" or by "max-width:100px" (it does of course not matter if the width is set in a css class or in the html directly)

vbmike

I neglected to ask poster but I don't think HTML5/CSS3 is being used. I find div's way more effective than table architecture. At least once I had the ah-ha moment. ;)

vbmike

Lost User

They say that tables are "old hat". But I say, they still to this day serve a purpose. And CodeProject, the website you are using right now, is an example of their continued use. But yes, you are right, div's are effective and most suitable for manipulation From the OP's original posting, it appears he was targetting older browsers using -moz- or -ms- and so on

vbmike

Sorry to add a comment after so long but I found this little bit on a css site and it works pretty well with your situation I would think....at least in my testing on my system. May have something to do with the hyphens settings being added...

-ms-word-break: break-all;
 word-break: break-all;

 /\* Non standard for webkit\*/
 word-break: break-word;

-webkit-hyphens: auto;
-moz-hyphens: auto;
 hyphens: auto;

vbmike

Jon Larborn

This dose not work for tables in all browser see previous discussion

vbmike

Ok, good luck. I don't use tables for much anymore.

vbmike