如何使用css应用换行/继续样式和代码格式

Question

当在网络上呈现预先格式化的文本(例如代码示例)时,换行可能是个问题.您希望在不滚动的情况下进行可读性包装,但也需要对用户明确说明它是一行而没有换行符.

例如,您可能需要显示一个非常长的命令行,如下所示:

c:\Program Files\My Application\Module\bin\..> Some_really_long_command line "with parameters" "that just go on and on" " that should all be typed on one line" "but need to be wrapped for display and I'd like the text style to indicate that it has wrapped"

(Stackoverflow强制这样的一行不要换行.)

有没有一种使用CSS设计样式的方法来提供与书中看到的相同的处理方式？即包裹该行,但包括指示行继续的图像或字形.

显然我正在寻找一种可以应用于所有文本的样式,并让浏览器的XHTML/CSS渲染引擎找出哪些行已经包装,因此需要特殊处理.

解决方案到目前为止..

添加行继续标志符号

感谢Jack Ryan和Maarten Sander,有一个合理可行的解决方案,可以在包裹线的左侧或右侧添加连续字形.它需要在垂直方向上具有重复字形的图像,该图像是偏移的,因此如果只有一条未包装的线条则不可见.该技术的主要要求是每条线都需要在一个块内(例如p,span或div).这意味着它不能轻易地手动使用刚刚坐在前块中的现有文本.

下面的片段总结了基本技术.我在这里发布了一个实例.

.wrap-cont-l {
  margin-left: 24px;
  margin-bottom: 14px;
  width: 400px;
}

.wrap-cont-l p {
  font-family: Courier New, Monospace;
  font-size: 12px;
  line-height: 14px;
  background: url(wrap-cont-l.png) no-repeat 0 14px; /* move the background down so it starts on line 2 */
  text-indent: -21px;
  padding-left: 14px;
  margin: 0 0 2px 7px;
}

.wrap-cont-r {
  margin-left: 24px;
  margin-bottom: 14px;
  width: 400px;
}

.wrap-cont-r p {
  font-family: Courier New, Monospace;
  font-size: 12px;
  line-height: 14px;
  background: url(wrap-cont-r.png) no-repeat right 14px; /* move the background down so it starts on line 2 */
  text-indent: -28px;
  margin: 0 0 2px 28px;
  padding-right: 14px;
}

要像这样使用:

<div class="wrap-cont-l">
  <p>take a long line</p>
  <p>take a long line</p>
</div>
<div class="wrap-cont-r">
  <p>take a long line</p>
  <p>reel him in</p>
</div>

但等等,还有更多!

我最近发现了Alex Gorbatchev的syntaxhighlighter.它是动态和自动格式化文本块的绝佳工具.它主要用于语法高亮代码,但可用于任何文本.但是在v1.5.1中,它不会换行(实际上它会强制它们不换行).

虽然我做了一些黑客攻击,并且能够添加一个简单的换行选项syntaxhighlighter并且还包含了延续字形构思.

我已将此添加到实际示例中,并包含了一些关于所需黑客的注释(它们是微不足道的).因此,将此作为页面中的文本:

<textarea name="code" class="java:wraplines" cols="60" rows="10">
public class HelloWorld {

  public static void main (String[] args)

  {

    System.out.println("Hello World! But that's not all I have to say. This line is going to go on for a very long time and I'd like to see it wrapped in the display. Note that the line styling clearly indicates a continuation.");

  }

}
</textarea>

这是格式化结果的快照:

截图http://tardate.com/syntaxhighlighter/line-continuation-example.jpg

Answer 1

这是一种（令人不愉快的）执行此操作的方法。它需要一些不好的做法。但 SO 是关于实际问题的解决方案，所以我们开始......

首先，每一行都需要包装在某种包含块中。Span 或 p 可能是最合适的。

那么包含块的样式需要设置行高。以及一个背景图像，其中在除第一行之外的每一行的开头包含许多 newLine 字形。由于这是代码，因此期望它不会换行超过 5 次是合理的。所以重复5次可能就足够了。

然后可以将其设置为背景图像，并且应显示在除第一行之外的每一行的开头。我猜生成的 CSS 可能如下所示：

p.codeLine
{
    font-size: 12px;
    line-height: 12px;
    font-family: Monospace;
    background: transparent url(lineGlyph) no-repeat 0 12px; /* move the background down so it starts on line 2 */
    padding-left: 6px; /* move the text over so we can see the newline glyph*/
}