How Can I Change The Way A Word Is Broken Over Multiple Lines Without Changing What Gets Copy-pasted?

I have a wide table with a lot of domain names in it. In order to make things play nicely on narrow displays like my monitors in portrait mode, I thought it would be enough to add

Solution 1:

Rather than inserting invisible unicode characters, the solution is to use markup. Put spans around the words you don't want to break inside of, and use word-break: break-all for the container (as per @gaynorvader's comment).

Please note that there shouldn't be anything between the spans. No spaces, no returns. That way, there won't be anything extra that gets copied along with the content.

div {word-break:break-all;}
divspan {word-break:normal; white-space:nowrap;}

<div><span>http://</span><wbr/><span>verylongsubdomain.</span><span>evenlongerdomainname.</span><wbr/><span>com/</span><wbr/><span>andaridiculouslylongfolder/</span><wbr/><span>withasimilarlylongfilename.</span><wbr/><span>txt</span></div>

Solution 2:

Use the <wbr/> tag, as mentioned by Mr Lister.

$very_long_token =~ s|([_.-])|<wbr/>$1|g;