换行时自动在“代码”环境中添加换行符号答案

【问题标题】：Line-break symbol automatically added inside a `code` environment when a line is wrapped换行时自动在“代码”环境中添加换行符号
【发布时间】：2019-09-06 13:11:57
【问题描述】：

格式化代码时，有时需要发生换行（如果行很长），但应该明确说明换行。

理想情况下，我希望能够写出类似的东西

<code class="sourceCode">
    this is a very long long long long long long long long long long long long long line which is broken.
</code>

但是如果代码需要被包裹，而不是添加水平滚动条，会显示如下

this is a very long long long long long long long long long long long long ↲ long line which is broken.

或

this is a very long long long long long long long long long long long long ↳ long line which is not broken

即，当需要换行时，将添加一个“↳”或“↲”符号（最终还会添加一些空格）。

我正在尝试渲染这样的东西：

用纯html/css（抓图来自this discussion，使用tex/latex和pandoc来渲染这个文档）。

这个问题似乎与

无关

work-break，因为我没有破坏任何词，
也不是 word-wrap 属性，因为我真的不在乎单词是否损坏。

但假设code 元素应用white-space: pre; 或pre-wrap 样式。

我觉得应该存在一个聪明的ccs 解决方案，而无需实际接触html，但我找不到它。

一个例子的开头可能是：

<!DOCTYPE html>
<html>
<head>
  <style>
      code{white-space: pre-wrap;}
      body{width: 25em}
  </style>
</head>
<body>
   <code class="sourceCode">
this is a very long long long long long long long long long long long long long line which is broken.
   </code>
</body>
</html>

即使我使用的代码实际上是由pandoc 生成的，并且看起来更像：

code{white-space: pre-wrap;}
a.sourceLine { display: inline-block; line-height: 1.25; }
.sourceCode { overflow: visible; }
code.sourceCode { white-space: pre; position: relative; }
body{width: 25em}

<div class="sourceCode">
  <pre class="sourceCode">
    <code class="sourceCode">
      <a class="sourceLine">this is a very long long long long long long long long long long long long long line which is broken.</a>
      <a class="sourceLine">I can have a short line as well</a>
      <a class="sourceLine">And empty lines, as well.</a>
      <a class="sourceLine">this is a very long long long long long long long long long long long long long line which is broken.</a>
      </code>
  </pre>
</div>

【问题讨论】：

标签： html css display

【解决方案1】：

这不是一个最佳答案，因为它需要完美排列一些东西。既然长线在前，起始位置很重要，它是在<pre>之后开始还是在下一行开始？与结束相同。它还要求您输入足够的\A\↳ 作为伪内容。这是一个概念证明，而不是简单的一步解决您的问题。

pre
{
    position: relative;
    margin-left: 10px;
}
code {
    white-space: pre-wrap;
}
code.sourceCode:before {
    position: absolute;
    bottom: 0;
    line-height: 1em;
    left: 0;
    font-size: 1.2em;
    margin-left: -1em;
    overflow: hidden;
    margin-top: 1em;
    top: 1em;
    content: "\A↳\A↳\A↳\A↳\A↳\A↳\A↳\A↳\A↳\A↳\A↳\A↳\A↳\A↳\A↳\A↳\A↳\A↳\A↳\A↳\A↳\A↳";
}

<div class="sourceCode">
<pre class="sourceCode">        
<code class="sourceCode">
this is a very long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long line which is broken.</code>
</pre>
</div>

【讨论】：

不错。我知道这是一个旧答案，但这似乎不适用于 在同一 <pre><code> 内的多行内容。（对于多行内容，此类代码块中的第二行也为第一部分添加了:before 前缀，让人感觉它实际上是第一行的一部分。）

【解决方案2】：

好的，这是我能找到的最接近的解决方案：使用first-line，可以定位行的第一部分，并将其与包裹的部分区分开来。我尝试将background-image 与the arrow from wikipedia、之类的图像的数据uri 一起使用以更接近，但没有成功。

.sourceLine{
  white-space: pre-wrap;
  text-indent: 10px;
  padding-left: -10px;
  margin-right: 1em;
  display:inline-block;
}

.sourceLine{
    background-color:lightblue;
 }
 
.sourceLine:first-line{
  background-color: red;
}

<div class="sourceCode">
  <pre class="sourceCode">
    <code class="sourceCode">
      <a class="sourceLine">this is a very long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long line which is broken.</a>
      <a class="sourceLine">I can have a short line as well</a>
      <a class="sourceLine">And empty lines, as well.</a>
      <a class="sourceLine">this is a very long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long line which is broken.</a>
      </code>
  </pre>
</div>

作为旁注，请注意组合 first-line 和 before 或 after is not possible (or is it?)。存在类似的问题（indicate automatic line break in white-space: pre-wrap element、CSS show indicator that line wrapped），但它们涵盖的方面略有不同。

【讨论】：

【解决方案3】：

尝试将此添加到 CSS 文本缩进：

.sourceCode{
 text-indent: -20px;
 }

<!DOCTYPE html>
<html>
<head>
  <style>
      code{white-space: pre-wrap;}
      body{width: 25em}
  </style>
</head>
<body>
<div class="sourceCode">
this is a very long long long long long long long long long long long long long line which is broken.
</div>
</body>
</html>

【讨论】：

这是一个很好的开始，谢谢，但我更专注于在每行的开头或结尾添加该符号。