Break word not work

word-break is not supported for the moment, you should see a warning about that when using the CLI. I’ve at least fixed the documentation about that.

As a workaround, you theoretically could use overflow-wrap: break-word instead of word-break: break-all, but it doesn’t work for various unrelated reasons:

• Pango 1.40.13 broke overflow-wrap, it’s fixed in 1.40.14,
• I don’t know how overflow-wrap: break-word and white-space: nowrap are supposed to work together (currently, white-space: nowrap always avoids wrapping), I have to read the spec,
• for some unknown reason overflow-wrap: break-word doesn’t work in tables.

I’m renaming the issue according to this last point, which is the real bug currently in WeasyPrint. When this bug is fixed, you’ll be able to do what you want in your example.

Answer by Alberto Curtis

When I’m using word-wrap:break-word with Browser Mode: IE9 Compatibility View and Document Mode: IE7 standards its working perfectly fine. However when I change the Document Mode: IE9 standards, its not working.
I’ve also tried using -ms-word-wrap:break-word however its giving me the same result.,it should work, .your_class_name{word-break:break-word;}, i have tested it in ie7 — ie9 and it breaks the word…,Adding -ms-word-break: break-word; worked for me.,

Stack Overflow for Teams
Where developers & technologists share private knowledge with coworkers

you need to have

table {
    width:100%;
    table-layout:fixed;
}

Answer by Bellamy Shepherd

The solution, using the HTML, ZERO-WIDTH-SPACE Unicode Character ​.,If you are attempting to wrap very long words or hyperlinks within a narrow container, you may experience text overflowing when viewing your results in IE11. This may happen despite using the CSS declaration word-wrap: break-word; in IE 11, but looks fine in other browsers. See below:,There are ways of handling long words and URLs using forced breaks, hyphenation, ellipsis, etc). See the terrific article here on the CSS Tricks website: https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/,What if you do not want a hyphen or ellipsis to appear? Using word-wrap: break-word; overflow-wrap: break-word; word-break: break-all; word-break: break-word; or even the Microsoft CSS Browser Prefix declaration -ms-word-break: break-all;, may not work. It didn’t for me.

CSS

#container { 
  width: 120px;
  background-color:#ccc;
  border: 1px solid #aaa;
  margin: 50px 50px 0;
}

.break {
  word-wrap: break-word;
}

HTML

<div id="container">
  <p>Donec sit amet erat porta, rhoncus dolor nec, <span class="break">scelerisqueaghtr​afdssf</span> accumsan leo. Phasellus eu ipsum aliquam, <a class="break" href="www.samplewebsite.com/reallylongurl">www.reallylong​websiteurl​.com/reallylongurl</a> rutrum orci a, pulvinar elit. Aenean auctor dignissim tempus.</p>
</div>

Answer by Ila Perez

-max-content it is not supported by IE, according to CanIuse.,So I created a fallback for IE that might help you, by setting .button to display:inline-block:,It’s working, but I don’t want to display the elements inline.,The CSS word-wrap: break-word; works only in display:block; or display:inline-block; elements so you can just use:

I have a small css script that force <a> tag word-wrap in a div. It worked fine on FF, Chrome but didn’t work on IE9. How can I fix it?

.tab_title a{
    word-wrap: break-word;
} 

Answer by Kairi Buck

Note: In contrast to word-break, overflow-wrap will only create a break if an entire word cannot be placed on its own line without overflowing.,Report a problem with this content on GitHub,This example compares the results of overflow-wrap, word-break, and hyphens when breaking up a long word.,Browser compatibility

/* Keyword values */
overflow-wrap: normal;
overflow-wrap: break-word;
overflow-wrap: anywhere;

/* Global values */
overflow-wrap: inherit;
overflow-wrap: initial;
overflow-wrap: revert;
overflow-wrap: unset;

Answer by Nash Miller

Also ran into this issue with the ML anomalies table, where fields like job IDs cannot contain spaces, so long values will overflow the cells in Firefox and Edge.,
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
,This property is being used a couple of times for tables to prevent content from overflowing. Works in Chrome:,@cchaos Reopening — fallback styles in #864 doesn’t seem to have been applied to the word-break property on table cells (screenshot on IE11):

Add fallback to just break-all in FF and IE

Answer by Ariya Abbott

It doesn’t work in IE 8 and 9. Do you have any suggestions for IE 8 and 9 for word-wrap: break-word; ?,I’m sorry that last code is working for me in IE8 at the moment…. but not in IE9. I rechecked,for me it does not seem’s to work on Chrome and firefox.,word wrap is not working in this website in firefox

The word-wrap property accepts two values, one of which is the default:

.selector {
  word-wrap: normal; /* the default */
}

.selector-2 {
  word-wrap: break-word;
}

If you are attempting to wrap very long words or hyperlinks within a narrow container, you may experience text overflowing when viewing your results in IE11. This may happen despite using the CSS declaration word-wrap: break-word; in IE 11, but looks fine in other browsers. See below:

There are ways of handling long words and URLs using forced breaks, hyphenation, ellipsis, etc). See the terrific article here on the CSS Tricks website: https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/

What if you do not want a hyphen or ellipsis to appear? Using word-wrap: break-word; overflow-wrap: break-word; word-break: break-all; word-break: break-word; or even the Microsoft CSS Browser Prefix declaration -ms-word-break: break-all;, may not work. It didn’t for me.

The solution, using the HTML, ZERO-WIDTH-SPACE Unicode Character ​.

CSS

#container { 
  width: 120px;
  background-color:#ccc;
  border: 1px solid #aaa;
  margin: 50px 50px 0;
}

.break {
  word-wrap: break-word;
}

HTML

<div id="container">
  <p>Donec sit amet erat porta, rhoncus dolor nec, <span class="break">scelerisqueaghtr​afdssf</span> accumsan leo. Phasellus eu ipsum aliquam, <a class="break" href="www.samplewebsite.com/reallylongurl">www.reallylong​websiteurl​.com/reallylongurl</a> rutrum orci a, pulvinar elit. Aenean auctor dignissim tempus.</p>
</div>

You have to insert the unicode character whereever you want the breaks to occur. See the final result below.