带有 html/css/javascript 的可复制粘贴控制台输出？

Question

我正在编写一个包含 shell 命令及其输出的教程。目的是文本不仅看起来像（linux）控制台，而且读者可以从中复制粘贴命令。

为此，文本必须像真正的控制台一样换行：所以没有分词，但也没有额外的换行符。前一行满了就开始新行。

编辑：另外，连续的空格不能被修剪，所以一行可能在任何地方有多个空格，即使它们必须正确呈现

例如看http://iwant.sourceforge.net/ext-libs-in-wsdef.html的开头

那里的命令比行长，所以它会换行。但是第一行末尾没有换行符。

我尝试了几种技巧，但都没有奏效。浏览器要么在单词边界处换行，要么根本不换行。或者然后我需要添加换行符或 div，在复制粘贴时产生不正确的内容（额外的换行符）。不间断空格 (nbsp) 也无济于事：它们根本不会（大吃一惊）中断。

我能想到的唯一解决方案是一个丑陋的 hack：我在字符之间插入了空的 img 元素。但是，就像许多丑陋的黑客一样，它只是暂时起作用：至少在当前的 chrome 版本中它仍然可以正确呈现，但是如果你将文本复制粘贴到控制台，它将包含一些代表 img 元素的废话字符。

那么在 HTML 中是否有一些“让我们换行而不是真正的换行符”元素？或者字符之间的零宽度“分隔空间”字符可以解决问题，但我还没有找到这样的字符或元素。还是 CSS 中有类似控制台的换行模式？

或者我是否需要使用 javascript 以编程方式操作选择？

Answer 1

CSS 中是否有类似控制台的换行模式？

是的。你需要的是word-break: break-all;。根据MDN，break-all 的意思是：“可以在非 CJK（中文/日文/韩文）文本的任何字符之间插入分词符。”，非常适合控制台输出。

编辑：要显示连续的空格，您可以使用<pre> 代替<span>，将其white-space 定义为pre-wrap，并将display 定义为inline。

EDIT2：为防止开始空格被修剪，您可以在<pre> 之前插入<span>，并将其隐藏为0 宽度。实际上，我发现使用<samp> 和<kdb> 更好，这在语义上更准确。小提琴已更新。

EDIT3：@Ville Oikarinen 找到一种无需额外 HTML <span> 元素即可实现的方法，请查看他的答案。

fiddle 是为您在http://iwant.sourceforge.net/ext-libs-in-wsdef.html 中的示例制作的，请检查您是否需要。

代码是：

<samp><span class="mark"></span>
<kbd class="cmd">
$EDITOR "as-iwant-tutorial-developer/i-have/wsdefdef/src/main/ja      va/com/example/wsdefdef/IwantTutorialWorkspaceProvider.java"
</kbd>
</samp>

.mark {
  display: inline-block;
  width: 0;
  visibility: hidden;
}
.cmd {
  color: white;
  word-break: break-all;
  white-space: pre-wrap;
  display: inline;
}

Answer 2

谢谢@shaochuancs，您的回答真的很有帮助，我将其标记为已接受。

我发现甚至不需要“mark”类的空跨度。这是我使用的编辑版本：http://jsfiddle.net/wipu/s4xve6mo/1

<div class="console"><samp>
<kbd class="shell prompt">~/iwant-tutorial $ </kbd>
<kbd class="shell cmd">  long-command "as-iwant-tutorial-developer/i-have/wsdefdef/src/main/java/com/example/wsdefdef/IwantTutorialWorkspaceProvider.java"  </kbd><br/>
<kbd class="shell output">  output line 1  </kbd><br/>
<kbd class="shell output">  output line 2 with a loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word  </kbd><br/>
</samp></div>

.console {
  background: black;
  font-family: monospace;
  width: 60em;
}
.shell {
  word-break: break-all; white-space:pre-wrap; display:inline;
}
.prompt {
  font-weight: bold; color: green;
}
.cmd {
  color: white;
}
.output {
  color: gray;  
}

这是在我的文档生成器“descript”中实现它的提交：https://sourceforge.net/p/descript/code/21/