在网络上展示预先格式化的文本(例如代码示例)时,换行可能是个问题。您希望在不滚动的情况下为可读性进行换行,但也需要它对用户来说是明确的,它是一行而没有换行符。
例如,您可能需要显示一个非常长的命令行,如下所示:
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)。这意味着它不能轻易地手动使用仅位于预阻塞的现有文本。
下面的片段总结了基本技术。我发布了一个实例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
答案 0 :(得分:3)
这是一种(令人不快的)这样做的方式。它需要一些不良做法。但是,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*/
}
答案 1 :(得分: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\..> 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\..> 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>
答案 2 :(得分:1)
使用CSS无法做到这一点。抱歉。 :(
答案 3 :(得分:1)
如果您希望它是明确的,您将不得不添加标记。我建议使用&lt; ol&gt;每行代码一个列表项,因为这样你可以免费获得行号。如果在整个网站上做太多工作,您可以随时使用Javascript添加它。