Word-wrap break-word does not work in this example
For word-wrap: break-word; to take effect, apply it to a block element with defined width. Here's how to wave the magic wand:
Double-check parent CSS in case there are evil wizards (unwanted settings) that may be preventing wrapping. And ensure your container is not running a "free the text" movement by allowing the text to overflow its bounds.
Ensuring compatibility across Hogwarts (aka browsers)
In the magical realms of Firefox and Chrome, you need to chant display: inline-block; for the word-wrapping spell to work. In Webkit realms like Safari, the new incantation is word-break: break-word;. Just be sure evil CSS spells like white-space: nowrap; aren't blocking your magic.
Advanced spell-casting tips
If word-wrap: break-word; isn't giving you the desired magical spectacle, try invoking word-break: break-all; for a more dramatic word-breaking performance. Or, for keeping proper hyphens while breaking lines, overflow-wrap: break-word; and hyphens: auto; might be your trusty magical duo.
Magical mishaps to avoid
Beware of deceptively alluring parents with fixed layouts, like those tempting tables with fixed cell widths. Also, avoid using fiendish, non-standard incantations like -ms-word-break: break-all; unless you're targeting very specific magical realms (browsers).
Setting the stage (width management)
Ensure you define the width of your show stage (the text-containing element). Without a known stage area, how will the browser know where to break the text act? To align your text performers neatly, text-align: justify; is a good stage management trick.
Spell-casting checklist
- Look out for high-authority spells that might override local word-wrap incantations.
- Harness the power of developer tools to check computed styles if text still spills over.
- Beware of tight nesting spells, such as inline incantations within inline ones.
- Is your doctype declaration in order? Similar to basic wizard hygiene, this prevents compatibility issues.
Dedicated troubleshooting spells
- Banishing long URLs: Use
word-break: break-all;to counteract. - Tackling overlapping text: Overlap could result from mischievous negative margins or absolute positioning.
- Giving a nod to old magic (browser support): Some older browsers might need vendor prefixes or dedicated spells.
Was this article helpful?