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

【问题标题】：How can I change the way a word is broken over multiple lines without changing what gets copy-pasted?如何在不更改复制粘贴内容的情况下更改单词在多行上的拆分方式？
【发布时间】：2015-11-12 17:39:16
【问题描述】：

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

{
  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 实现相同的效果，而不会实际影响用户从页面复制粘贴的文本？

【问题讨论】：

对不起，我没有时间写一个完整的、经过测试的答案，但听起来你可能正在寻找 word-break w3schools.com/cssref/css3_pr_word-break.asp
@gaynorvader 具有在每个字符之间添加零宽度空格的相同装饰效果。这不是我想要达到的目标。

标签： html css unicode

【解决方案1】：

解决方法是使用标记，而不是插入不可见的 unicode 字符。
在您不想中断的单词周围放置跨度，并为容器使用word-break: break-all（根据@gaynorvader 的评论）。

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

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

&lt;div&gt;&lt;span&gt;http://&lt;/span&gt;&lt;wbr/&gt;&lt;span&gt;verylongsubdomain.&lt;/span&gt;&lt;span&gt;evenlongerdomainname.&lt;/span&gt;&lt;wbr/&gt;&lt;span&gt;com/&lt;/span&gt;&lt;wbr/&gt;&lt;span&gt;andaridiculouslylongfolder/&lt;/span&gt;&lt;wbr/&gt;&lt;span&gt;withasimilarlylongfilename.&lt;/span&gt;&lt;wbr/&gt;&lt;span&gt;txt&lt;/span&gt;&lt;/div&gt;

【讨论】：

这对您来说是否正确？ sn-p... 介于 'htt' 和 'p://verylongsubdomain' 之间，其他任何地方都没有。铬 46。
现在也可以在 Chrome 中使用了；看我的编辑。抱歉之前的事！
不用担心。但是……现在有必要玩断字和空格吗？ wbr 标签本身似乎就足够了。 :)
不支持<wbr/>的浏览器可能需要它们。

【解决方案2】：

使用the <wbr/> tag，如李斯特先生所述。

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

【讨论】：