假设我们有一个div
包含一些多行文本的容器,并且其中一些行被换行。
是否可以添加图像以指示特定行被换行,而不是由 分隔的另一行<br>
?
来自 Notepad++ 的所需样本:
沙箱:http: //jsfiddle.net/yL9gU/
假设我们有一个div
包含一些多行文本的容器,并且其中一些行被换行。
是否可以添加图像以指示特定行被换行,而不是由 分隔的另一行<br>
?
来自 Notepad++ 的所需样本:
沙箱:http: //jsfiddle.net/yL9gU/
这就是你要找的:
body {
width: 80%;
margin: 1em auto;
}
pre, p {
margin-bottom: 1em;
}
/* Line Markup */
pre {
white-space: pre-wrap;
}
pre code, span.line {
display: block;
}
/* Line height = picuture height */
span.line {
line-height: 28px;
}
/* Indicators in :before and :after */
span.line {
padding: 0 13px; /* 8px for indicator, 5px for space around text */
position: relative;
}
span.line:before, span.line:after {
background-repeat: repeat-y;
content: "";
display: block;
width: 10px;
height: 100%;
position: absolute;
}
span.line:before {
background-image: url("http://iany.me/gallery/2012/02/css-line-wrap-indicator/line-right.png");
left: 1px;
top: 0;
}
span.line:after {
background-image: url("http://iany.me/gallery/2012/02/css-line-wrap-indicator/line-right.png");
right: -1px;
top: 0;
}
/* No left indicator on first line and no right indicator on last line */
span.line {
overflow: hidden;
}
span.line:before {
top: 28px;
}
span.line:after {
top: auto;
bottom: 28px;
}
/* Add color */
pre {
border-style: solid;
border-color: #EEE;
border-width: 0 8px;
background-color: #AAA;
}
span.line {
margin: 0 -8px;
}
由 Ian Yang 提供, http: //iany.me/2012/02/css-line-wrap-indicator/
jsfiddle 中的图像 url 无法解析,因此您不会看到它在工作,但是用另一个图像 url 替换它,它会像您需要的那样工作。
他还让它标记了一条线继续的左侧,但你可以把那部分剪掉。
我怀疑这可以在不将 BR 更改为 DIV 的情况下完成,因为似乎 BR 真的很难设置样式:
这是一个简单的纯 CSS 解决方案,需要将 BR 更改为 DIV(可能使用 javascript):
#text {
border: 1px solid black;
width: 300px;
}
#text div {
line-height: 16px;
background: url(http://cdn.sstatic.net/stackoverflow/img/favicon.ico);
background-repeat: repeat-y;
background-position: right top;
}
#text div:after {
float: right;
width: 16px;
height: 16px;
background-color: white;
content: " ";
}
如果您对 JS 解决方案感到满意,也许这里的某些东西会有所帮助:
即使它的测试很差,我认为这可能接近你想要的:http: //jsfiddle.net/yL9gU/9/
遗憾的是不得不使用 lettering.js,所以不能保持纯 CSS,请在此处查看更多信息:http: //letteringjs.com/
请参阅此处的多背景规范,在 IE8 中不起作用:
http://caniuse.com/#feat=multibackgrounds