stackoom
  简体   繁体   中英

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

 原文  2012-05-24 19:05:40  4   9    html/ css

Question

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.

9 answers

solution1
 116 ACCPTED  2012-05-24 19:22:48

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.

solution2
 45  2015-10-19 12:41:11

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;

solution3
 36  2019-11-04 00:24:21

Work-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 .

see this codepen

 <html> <head> </head> <body> <style scoped> .parent { width: 100vw; } p { border: 1px dashed black; padding: 1em; font-size: calc(0.6vw + 0.6em); direction: ltr; width: 30vw; margin:auto; text-align:justify; word-break: break-word; white-space: pre-line; overflow-wrap: break-word; -ms-word-break: break-word; word-break: break-word; -ms-hyphens: auto; -moz-hyphens: auto; -webkit-hyphens: auto; hyphens: auto; } } </style> <div class="parent"> <p> 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. </p> </div> </body> </html>

solution4
 8  2015-09-11 13:05:27

This combination of properties helped for me:

display: inline-block;
overflow-wrap: break-word;
word-wrap: break-word;
word-break: normal;
line-break: strict;
hyphens: none;
-webkit-hyphens: none;
-moz-hyphens: none;

solution5
 6  2021-04-09 11:09:44

max-width: 100px;
white-space: break-spaces;

solution6
 2  2018-03-06 09:59:34

to get the smart break (break-word) work well on different browsers, what worked for me was the following set of rules:

#elm {
    word-break:break-word; /* webkit/blink browsers */
    word-wrap:break-word; /* ie */
}
-moz-document url-prefix() {/* catch ff */
    #elm {
        word-break: break-all; /* in ff-  with no break-word we'll settle for break-all */
    }
}

solution7
 1  2019-02-01 10:09:12

This code is also working: 

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

solution8
 1  2020-09-18 13:32:26

  • inline-block is of no use in this scenario

SOLUTION

  • word-break: normal|break-all|keep-all|break-word|initial|inherit;
    Simple Answer to your doubt is Use above and make sure white-space: nowrap nowhere used.

NOTE FOR BETTER UNDERSTANDING:

  • word-wrap / overflow-wrap is used to break words that overflow their container

  • 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 container.

  • word-wrap is the historic and nonstandard property. It has been renamed to overflow-wrap but remains an alias, browsers must support in future. Many browsers (especially the old ones) don't support overflow-wrap and require word-wrap as a fallback (which is supported by all).

  • If you want to please the W3C you should consider associate both in your CSS. If you don't, using word-wrap alone is just fine.

solution9
 0  2019-02-01 10:18:33

word-wrap property work's with display:inline-block : 

display: inline-block;
word-wrap: break-word;
width: 100px;

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question css word-wrap: break-word won't work Word-wrap: break-word does not work with a very long word combined with width: 100% WebView word-wrap:break-word Difference between word-wrap: break-word and word-break: break-word word-wrap: break-word not working on lists in Safari 10.1 Triggering word-wrap: break-word in CSS word-wrap:break-word is not working with iText 2.1.7 word-wrap: break-word; not breaking the <code></code> tag side effects of always using word-wrap: break-word Word-wrap: break-word breaks to wrong div size
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM