How to add an image in the end of every wrapped line?

Question

Assuming we have a div container that contains some multiline text and some of these lines are wrapped.

Is it possible to add an image to indicate that a particular line is wrapped, not another line separated by <br>?

A desired sample from Notepad++:

A sandbox: http://jsfiddle.net/yL9gU/

Answer 1

I doubt this can be done without changing BRs to DIVs because it seems BRs are really hard to style:

Can you target <br /> with css?

Here is a simple pure CSS solution that requires BRs to be changed to DIVs (possibly with 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/

If you can be satisfied with JS solution maybe something here will help:

detecting line-breaks with jQuery?

Answer 2

This is what you're looking for:

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/

Courtesy of Ian Yang, http://iany.me/2012/02/css-line-wrap-indicator/

The image url in the jsfiddle doesn't resolve, so you won't see it working, but replace that with another image url and it'll work just like you need.

He also makes it mark the left side where a line continues, but you can cut that part out.

Answer 3

Even though it's poorly tested, I think this may be close to what you want: http://jsfiddle.net/yL9gU/9/

Sadly had to use lettering.js so couldn't keep it pure CSS, see more here: http://letteringjs.com/

See specs for multi backgrounds here, doesn't work in IE8:

http://caniuse.com/#feat=multibackgrounds