html - 如何在不更改复制粘贴的内容的情况下更改单词在多行中的拆分方式？

Question

我有一张宽表，里面有很多域名。为了让东西在像我的纵向模式显示器这样的狭窄显示器上很好地播放，我认为一路添加一些零宽度空间就足够了。

{
  use charnames ':full';
  $very_long_token =~ s/[_.-]/\N{ZERO WIDTH SPACE}$1/g;
}

我记得在包含技术文档的 Word 文档中执行此操作，它确实改进了那里的表格布局。 Word 也足够好，可以在复制文本时吞下零宽度空格，因此我可以拥有可接受的布局和正确复制粘贴的文本。

浏览器还不够好，如果您尝试将“google. com”当作“google.com”来使用，您可能会遇到麻烦。

$ dig google.​com

; <<>> DiG 9.9.5-11ubuntu1-Ubuntu <<>> google.​com
;; global options: +cmd
;; Got answer:
;; ->>HEADER<<- opcode: QUERY, status: NXDOMAIN, id: 741
;; flags: qr rd ra; QUERY: 1, ANSWER: 0, AUTHORITY: 1, ADDITIONAL: 1

;; OPT PSEUDOSECTION:
; EDNS: version: 0, flags:; udp: 4000
;; QUESTION SECTION:
;google.\226\128\139com.        IN  A

↑↑↑↑↑↑↑↑↑↑↑↑↑ 哎呀

我能否实现相同的效果，也许是通过一些 CSS majicks，而不实际影响用户从页面复制粘贴的文本？

Answer 1

解决方案不是插入不可见的 unicode 字符，而是使用标记。
将 span 放在您不想在其中打断的单词周围，并为容器使用 word-break: break-all(根据@gaynorvader 的评论)。

请注意，跨度之间不应有任何内容。没有空格，没有回车。这样，就不会有任何额外的内容随内容一起复制。

div {word-break:break-all;}
div span {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>