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

Posted

技术标签:

【中文标题】如何使用 css 应用换行/延续样式和代码格式【英文标题】:How to apply a line wrap/continuation style and code formatting with css 【发布时间】:2010-09-24 17:16:16 【问题描述】:

在网络上呈现预先格式化的文本(例如代码示例)时,换行可能是个问题。您希望在不滚动的情况下进行换行以提高可读性,但还需要让用户清楚地知道它是一行,没有换行符。

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

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"

(*** 强制这样的行不换行。)

有没有一种使用 CSS 进行样式设置的方法来提供与您在书中看到的相同的处理方式?即换行,但包含表示续行的图像或字形。

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

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

添加行继续字形

感谢 Jack Ryan 和 Maarten Sander,他们提供了一个合理可行的解决方案,可以在换行的左侧或右侧添加延续字形。它需要一个在垂直方向具有重复字形的图像,该图像是偏移的,因此如果只有一条展开的线,它是不可见的。这种技术的主要要求是每一行都需要在一个块内(例如 p、span 或 div)。这意味着它不能很容易地与仅位于预块中的现有文本一起手动使用。

下面的片段总结了基本技术。我发布了一个实时示例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 的 syntaxhighlighter。它是动态和自动格式化文本块的绝佳工具。它主要用于语法高亮代码,但可用于任何文本。然而,在 v1.5.1 中,它不换行(实际上它强制它们不换行)。

不过,我做了一些修改,并且能够添加一个简单的换行选项 syntaxhighlighter 并且还结合了延续字形的想法。

我已将此添加到live examples 并包含一些关于所需黑客的注释(它们是微不足道的)。所以用这个作为页面中的文本:

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

这是格式化结果的快照:

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

【问题讨论】:

您应该将解决方案合并为答案。 我已经在问题本身“到目前为止的解决方案..”中做到了这一点。我无法编辑收到的最佳答案,也不想通过创建自己的答案来剥夺代表(我得到的答案值得称赞!)。试图在 SO.. 的参数范围内工作。 【参考方案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*/

【讨论】:

太棒了!虽然你得到了水平和垂直定位回到前面。这在 IE/FF 中对我有用: background: transparent url(wrap-cont.png) no-repeat 0 12px; 太棒了!我很高兴听到它!我喜欢 Ant P 提出的行号建议的 ol。它在语义上可能也更好。 请注意,我已经整理总结了问题本身的最佳解决方案【参考方案2】:

我找到了一个与 Jack Ryan 非常相似的解决方案,但在行尾添加了“延续”字符。它还会缩进连续的行。

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;

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>*** forces a line like this not to wrap.</p>

【讨论】:

谢谢马丁。但是定位“右下角”意味着您在 每一 行(甚至是非换行)上都获得了延续字形,因为它没有使用 Jack 在可见框下方呈现的技巧。靠近: background: url(wrap-cont.png) no-repeat right 16px;【参考方案3】:

这不能用 CSS 来完成。对不起。 :(

【讨论】:

@eyelidlessness 你说得太早了;-)【参考方案4】:

如果您希望它明确,则必须添加标记。我建议每行代码使用一个带有一个列表项的

    ,因为这样您就可以免费获得行号。如果整个站点的工作量太大,您可以随时使用 javascript 添加它。

【讨论】:

以上是关于如何使用 css 应用换行/延续样式和代码格式的主要内容,如果未能解决你的问题,请参考以下文章

如何使用css让td中的文字自动换行

如何插入外部样式表

如何使用 CSS 字段样式在网格中水平居中视图字段

如何让Jekyll支持Markdown的代码块格式

css样式问题,为啥把form表单放进table的td里面,input type='submit'会自动换行啊?如何才可以不换行?

如何提供将页面下载为完整 HTML 文件的选项(使用 JS/CSS 重新格式化和设置样式后)