title: Line-break symbol automatically added inside a `code` environment when a line is wrapped
body: <p>When formatting code, line wraps sometimes need to happen (in case of long lines), but it should be explicit that a line was wrapped.</p>
  
  <p>Ideally, I would like to be able to write something like</p>
  
  <pre><code>&lt;code class="sourceCode"&gt;
      this is a very long long long long long long long long long long long long long line which is broken.
  &lt;/code&gt;
  </code></pre>
  
  <p>but if the code needs to be wrapped, instead of adding a horizontal scrolling bar, the following would be displayed</p>
  
  <p><code>this is a very long long long long long long long long long long long long ↲
  long line which is broken.</code></p>
  
  <p>or</p>
  
  <p><code>this is a very long long long long long long long long long long long long
  ↳ long line which is not broken
  </code></p>
  
  <p>I.e., a "↳" or a "↲" sign (and, eventually, some space) would be added when the line needs to be broken.</p>
  
  <p>I'm trying to render something like this:</p>
  
  <p><a href="https://i.stack.imgur.com/wa7nz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wa7nz.png" alt="enter image description here"></a></p>
  
  <p>with pure html / css (the capture comes from <a href="https://tex.stackexchange.com/a/412316/34551">this discussion</a>, which uses tex/latex and pandoc to render this document).</p>
  
  <p>This issue does not seem to be related to</p>
  
  <ul>
  <li>the <a href="https://www.w3schools.com/cssref/css3_pr_word-break.asp" rel="nofollow noreferrer">work-break</a>, since I am not breaking any word,</li>
  <li>nor to the <a href="https://www.w3schools.com/cssref/css3_pr_word-wrap.asp" rel="nofollow noreferrer">word-wrap</a> property, since I don't really care whenever words are broken or not.</li>
  </ul>
  
  <p>But suppose that the <code>code</code> element gets applied a <code>white-space: pre;</code> or <code>pre-wrap</code> style.</p>
  
  <p>I feel that a clever <code>ccs</code> solution should exist, without actually touching the <code>html</code>, but I can't find it.</p>
  
  <p>The beggining of an example could be:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;style&gt;
        code{white-space: pre-wrap;}
        body{width: 25em}
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
     &lt;code class="sourceCode"&gt;
  this is a very long long long long long long long long long long long long long line which is broken.
     &lt;/code&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Even if, actually, the code I'm using is produced by <a href="https://pandoc.org/" rel="nofollow noreferrer">pandoc</a> and looks more like:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>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}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="sourceCode"&gt;
    &lt;pre class="sourceCode"&gt;
      &lt;code class="sourceCode"&gt;
        &lt;a class="sourceLine"&gt;this is a very long long long long long long long long long long long long long line which is broken.&lt;/a&gt;
        &lt;a class="sourceLine"&gt;I can have a short line as well&lt;/a&gt;
        &lt;a class="sourceLine"&gt;And empty lines, as well.&lt;/a&gt;
        &lt;a class="sourceLine"&gt;this is a very long long long long long long long long long long long long long line which is broken.&lt;/a&gt;
        &lt;/code&gt;
    &lt;/pre&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>