问：

在 Web 上显示预先格式化的文本（例如代码示例）时，换行可能是一个问题。您希望在不滚动的情况下换行以提高可读性，但也需要向用户明确指出，它都是一行，没有换行符。

例如，您可能有一个很长的命令行要显示，如下所示：

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）的语法荧光笔。它是动态和自动格式化文本块的绝佳工具。它主要用于语法突出显示代码，但也可用于任何文本。然而，在 v1.5.1 中，它不换行（实际上它强制它们不换行）。

不过，我做了一些修改，并且能够添加一个简单的换行选项语法荧光笔，并合并了延续字形的想法。

我已将其添加到实时示例中，并包含了一些关于所需技巧的注释（它们是微不足道的）。因此，以此作为页面中的文本：

<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

HTML CSS格式


p {
  font-family: Arial, Sans-Serif;
  font-size: 13px;
  line-height: 16px;
  margin: 0 0 16px 0;
}

.wrap-cont {
  font-family: Courier New, Monospace;
  margin-bottom: 16px;
  width: 400px;
}

.wrap-cont p {
  background: url(wrap-cont.gif) no-repeat bottom right;
  text-indent: -32px;
  margin: 0 0 0 32px;
  padding-right: 16px;
}

The HTML:


<p>For example, you may have a really long command line to display, like this:</p>
<div class="wrap-cont">
  <p>c:\Program Files\My Application\Module\bin\..&gt; 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"</p>
  <p>c:\Program Files\My Application\Module\bin\..&gt; 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"</p>
</div>
<p>Stackoverflow forces a line like this not to wrap.</p>

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

How to apply a line wrap/continuation style and code formatting with css

到目前为止的解决方案..

添加行继续符字形

但是等等，还有更多！

评论

评论

评论

评论