html - 折り返されたすべての行の最後に画像を追加する方法は?

Question

div複数行のテキストを含むコンテナーがあり、これらの行の一部が折り返されていると仮定します。

で区切られた別の行ではなく、特定の行が折り返されていることを示す画像を追加することはでき<br>ますか?

Notepad++ からの望ましいサンプル:

サンドボックス: http://jsfiddle.net/yL9gU/

Answer 1

これはあなたが探しているものです：

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 に置き換えると、必要に応じて機能します。

線が続く左側も目印にしていますが、その部分は切り取って構いません。

Answer 2

BR はスタイリングが非常に難しいように思われるため、BR を DIV に変更せずにこれを実行できるとは思えません。

css で <br /> をターゲットにできますか?

以下は、BR を DIV に変更する必要がある単純な純粋な CSS ソリューションです (おそらく 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で改行を検出しますか?