3 ms·

Here's one very few people know: It works like a line break, but it only kicks in if the word needs to be broken. Very useful for email/URL formattin

Here's one very few people know: It works like a line break, but it only kicks in if the word needs to be broken. Very useful for email/URL formatting on mobile (along with ).

chrismorgan 4y ago
A subtlety to point out about when comparing it to its textual alternative ZWSP (U+200B ZERO WIDTH SPACE): if someone copies the text (as text—if it’s copied as formatted HTML, anything could happen), ZWSP will remain, whereas will disappear. You could exclude the ZWSP with something like `user-select: none`. So really, is kinda like <word-break-opportunity style="user-select:none"></word-break-opportunity>. My experience is that is almost always what you want rather than ZWSP. There are similar but more obscure considerations with the difference between and a textual carriage return preserved by `white-space: pre`. Take the document data:text/html,<pre>a%0Ab c</pre> (containing one carriage return and one manual line break), and document.body.textContent is "a\nbc" (the disappears), while document.body.innerText is "a\nb\nc" ( becomes \n). As for removing the line breaks from what goes on the clipboard (which is desirable if you’re choosing visually-optimal break points manually), well, that’s unreliable. I’ve only ever tried it on Firefox, but tricks like `user-select: none` on a line break of either kind don’t work, netting you two line breaks for some reason; wrapping each line in something like can work.

Here's one very few people know: <wbr/> It works like a line break, but it only kicks in if the word needs to be broken. Very useful for email/URL formattin

Here's one very few people know: <wbr/> It works like a line break, but it only kicks in if the word needs to be broken. Very useful for email/URL formattin