How do I wrap text with no whitespace inside a 2020-01-24 11:07发布 站内问答 / HTML/CSS 1961 9 5

Question

I've used:

word-break:break-all;
table-layout:fixed;

and the text wraps in Chrome but not Firefox.

Update: I decided to change the design so it didn't need the wrap; trying to sort out a CSS fix/hack was proving too frustrating and time consuming.

Answer 1

I think this is a long standing issue in Firefox, that harks back to Mozilla and Netscape. I'll bet you were having the issue with the display of long URLs. I think it is an issue with the rendering engine rather than something you can fix with CSS, without some ugly hacks.

Makes sense to change the design.

This looked hopeful though: http://hacks.mozilla.org/2009/06/word-wrap/

Answer 2

You can manually inject zero width spaces (​) to create break points.

Answer 3

Here is advanced version of what OP asked.

Sometimes, what happens is that, our client wants us to give '-' after word break to end of line.

Like

AAAAAAAAAAAAAAAAAAAAAAABBBBBBBBBBB

break to

AAAAAAAAAAAAAAAAAAAAAAA-
BBBBBBBBB

So, there is new CSS property if supported, usually supported in latest browsers.

.dont-break-out {

  /* These are technically the same, but use both */
  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;

}

I am using this one.

I hope somebody will have demand like this.