11

假设我们有一个div包含一些多行文本的容器，并且其中一些行被换行。

是否可以添加图像以指示特定行被换行，而不是由 分隔的另一行<br>？

来自 Notepad++ 的所需样本：

在此处输入图像描述

沙箱：http: //jsfiddle.net/yL9gU/

4

3 回答 3

2

这就是你要找的：

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

http://jsfiddle.net/fbDKQ/13/

由 Ian Yang 提供， http: //iany.me/2012/02/css-line-wrap-indicator/

jsfiddle 中的图像 url 无法解析，因此您不会看到它在工作，但是用另一个图像 url 替换它，它会像您需要的那样工作。

他还让它标记了一条线继续的左侧，但你可以把那部分剪掉。

于 2013-05-14T21:48:25.157 回答
2

我怀疑这可以在不将 BR 更改为 DIV 的情况下完成，因为似乎 BR 真的很难设置样式：

你可以用css定位<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: " ";
}

http://jsfiddle.net/qVn4L/3/

如果您对 JS 解决方案感到满意，也许这里的某些东西会有所帮助：

用jQuery检测换行符？

于 2013-05-14T22:04:05.160 回答
1

即使它的测试很差，我认为这可能接近你想要的：http: //jsfiddle.net/yL9gU/9/

遗憾的是不得不使用 lettering.js，所以不能保持纯 CSS，请在此处查看更多信息：http: //letteringjs.com/

请参阅此处的多背景规范，在 IE8 中不起作用：

http://caniuse.com/#feat=multibackgrounds
于 2013-05-14T22:07:21.207 回答