如何应用线包装/继续样式和代码格式与css [英] How to apply a line wrap/continuation style and code formatting with css

问题描述

当在网上呈现预格式文本（例如代码示例）时，换行可能是一个问题。您希望在不滚动的情况下进行换行，但也需要它对用户来说是明确的，它是一行没有换行符。

When presenting preformatted text on the web (e.g. code samples), line wrapping can be a problem. You want to wrap for readability without scrolling, but also need it to be unambiguous to the user that it is all one line with no line break.

例如，有一个很长的命令行显示，像这样：

For example, you may have a really long command line to display, like this:

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强制类似这样的行不能换行。）

(Stackoverflow forces a line like this not to wrap.)

有什么样的CSS样式给你在书中看到的相同的待遇吗？即包装该行，但包括指示行连续的图像或字形。

Is there a way of styling with CSS to give the same treatment as you see in books? i.e. to wrap the line, but include an image or glyph that indicates a line continuation.

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

Obviously I am looking for a style that can be applied to all text, and let the browser's XHTML/CSS rendering engine figure out which lines have wrapped and therefore need the special treatment.

感谢Jack Ryan和Maarten Sander，有一个合理可行的解决方案，可以在包装线的左侧或右侧添加延续字形。它需要在垂直方向上具有重复字形的图像，其被偏移，使得如果只有一个展开的线则它是不可见的。该技术的主要要求是每条线需要在块（例如，p，span或div）内。这意味着它不能轻易地用现在的文本，只是坐在一个预先块中手动使用。

Thanks to Jack Ryan and Maarten Sander, have a reasonably workable solution to add continuation glyphs to either the left or right of wrapped lines. It requires an image with repeating glyphs in the vertical, which is offset so that it is invisible if only one unwrapped line. The main requirement of this technique is that every line needs to be within a block (e.g. p, span or div). This means it cannot easily be used manually with existing text that is just sitting in a pre block.

下面的片段总结了基本的技术。我发布了一个实例此处。

The fragment below summarises the essential technique. I posted a live example here.

.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中，它不包装行（实际上它强制他们不包装）。

But wait, there's more!

I recently discovered syntaxhighlighter by Alex Gorbatchev. It is a fantastic tool for dynamically and automatically formatting text blocks. It is principally intended for syntax highlighting code, but could be used for any text. In v1.5.1 however, it does not wrap lines (in fact it forces them not to wrap).

我做了一个小小的黑客，一个简单的线包装选项语法高亮度，并且还包含连续字形想法。

I did a little hacking around though, and was able to add a simple line wrap option syntaxhighlighter and also incorporate the continuation glyph idea.

我已将此添加到活动示例，并包括所需的黑客的几个笔记（他们是微不足道的）。因此，这是页面中的文本：

I've added this to the live examples and included a few notes on the hacks required (they are trivial). So with this as the text in the page:

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

这是格式化结果的快照：

This is a snapshot of the formatted result:

推荐答案

这里有一种（不愉快的）方式。它需要一些不良做法。但是SO是关于真正问题的解决方案，所以这里我们去...

Here is one (unpleasant) way of doing this. It requires a number of bad practices. But SO is about solutions to real problems so here we go...

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

First each line needs to be wrapped in some sort of containing block. Span or p are probably the most appropriate.

然后，包含块的样式需要设置行高。以及在除了第一行之外的每一行的开始处包含多个newLine字形的背景图像。因为这是代码，它会是可乐的，期望它不包装超过5次。所以重复5次可能是enoygh。

Then the style of the containing block needs to have line height set. and a background image that contains a number of newLine glyphs at the start of every line except the first one. As this is code it would be resonable to expect it to not wrap more than 5 times. So repeating 5 times is probably enoygh.

然后可以设置为背景图像，并应显示在每一行的开始，除了第一个。我想结果CSS可能看起来像这样：

This can then be set as the background image, and should display at the beginning of every line except the first one. I guess the resulting CSS might look like this:

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*/
}

这篇关于如何应用线包装/继续样式和代码格式与css的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！