|
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;
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;
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
}
|
|
|
|
|
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;
width: 450px;
mso-word-wrap: normal;
-ms-word-break: normal;
word-break: normal;
-ms-word-wrap: normal;
word-wrap: normal;
}
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
|
|
|
|
|
I always want a word to break when it exceeds the maximum width. The normal break did not work.
|
|
|
|
|
Give me an idea of the content you are trying to use and what you want it to look like.
vbmike
|
|
|
|
|
any long word breaked in a table cell.
|
|
|
|
|
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
|
|
|
|
|
| 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.
|
|
|
|
|
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
|
|
|
|
|
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[^]
modified 1-Aug-19 21:02pm.
|
|
|
|
|
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)
|
|
|
|
|
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
|
|
|
|
|
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
modified 1-Aug-19 21:02pm.
|
|
|
|
|
This dose not work. normal do not break words. look at my later answer to this question.
|
|
|
|
|
I have the same problem. 
|
|
|
|
|
I did it on the server-side instead. Not a good solution but a workaround
|
|
|
|
|
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;
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
vbmike
|
|
|
|
|
This dose not work for tables in all browser see previous discussion
|
|
|
|
|
Ok, good luck. I don't use tables for much anymore.
vbmike
|
|
|
|
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Praise 
Rant 
Admin 
Submit an article or tip
