Question

当格式化代码时，有时需要发生换行（在长行的情况下），但应该明确的是换行。

理想情况下，我希望能够写一些像

<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>

1

0

Answer 1

这不是一个很好的答案，因为它需要一些东西来完美地排列。由于长线是在 pre 中，起始位置很重要，它是在<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>

Answer 2

Ok, this is as close as I can get to a solution: using first-line, it is possible to target the first part of the line, and to differentiate it from the wrapped part. I tried to use background-image with the data uri of an image like the arrow from , to get something closer, but did not succeeded.

.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或afteris not possible(or is it?).

Answer 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>