Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

word-wrap break-word does not work in this example

Tags:

html

css

I cannot get word-wrap to work with this example...

<html> <head></head> <body>  <table style="table-layout:fixed;"> <tr> <td style="word-wrap: break-word; width:100px;">ThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrap</td> </tr> </table>  </body></html> 

I remembered reading that a layout had to be specified (which I did), but beyond that I'm not sure what I have to do to get this to work. I really would like this to work in Firefox. Thanks.

EDIT: Failed in Chrome 19 and Firefox 12, it works in IE8. I tried doctype strict and transitional, neither worked.

like image 436
b10hazard Avatar asked May 24 '12 19:05

b10hazard


People also ask

Why word-break is not working in CSS?

Word-Break has nothing to do with inline-block . Make sure you specify width and notice if there are any overriding attributes in parent nodes. Make sure there is not white-space: nowrap .

What does word-wrap break word do?

The two properties ( word-break and word-wrap ) differ rules and overflow of words: as mentioned earlier, word-wrap is used to break words that overflow their container, while the word-break property breaks all words at the end of a line, even those that would normally wrap onto another line and wouldn't overflow their ...

What is word-wrap example?

An example of word wrap is the automatic moving of the words on a long line of words to fit the words within a cell on a spreadsheet. (computing) A word processing feature which automatically adjusts lines of text to fit within the page margins. Words exceeding the margins are set to begin a new line.


2 Answers

Mozilla Firefox solution

Add:

display: inline-block; 

to the style of your td.

Webkit based browsers (Google Chrome, Safari, ...) solution

Add:

display: inline-block; word-break: break-word; 

to the style of your td.

Note: Mind that, as for now, break-word is not part of the standard specification for webkit; therefore, you might be interested in employing the break-all instead. This alternative value provides a undoubtedly drastic solution; however, it conforms to the standard.

Opera solution

Add:

display: inline-block; word-break: break-word; 

to the style of your td.

The previous paragraph applies to Opera in a similar way.

like image 146
Stencil Avatar answered Oct 16 '22 17:10

Stencil


Use this code (taken from css-tricks) that will work on all browser

overflow-wrap: break-word; word-wrap: break-word;  -ms-word-break: break-all; /* This is the dangerous one in WebKit, as it breaks things wherever */ word-break: break-all; /* Instead use this non-standard one: */ word-break: break-word;  /* Adds a hyphen where the word breaks, if supported (No Blink) */ -ms-hyphens: auto; -moz-hyphens: auto; -webkit-hyphens: auto; hyphens: auto; 
like image 22
Sunny S.M Avatar answered Oct 16 '22 17:10

Sunny S.M