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++:

enter image description here

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

Yes you can do that with complex JavaScript. But I think there'll not be a great cross-browser solution and the solution won't be very fast. But this looks like it should be part of a WYSIWYG editor and that's one of the most complex things in JavaScript. — noob, May 14 '13 at 21:45
i guess a good place to start would be cloning a div with no width set and applying `white-space: nowrap` - then comparing to see if the cloned one has a greater width. Then you will need to check for new paragraphs and line breaks etc and repeat the process with cut down text from what you've already marked/not marked - good question btw — TimCodes.NET, May 14 '13 at 21:46
@mic: share your idea with js. We don't scare of complexity :-) PS: I can think of a `` that has the same width as an original container which we are feeding with the original text expecting it to grow by height — zerkms, May 14 '13 at 21:47
greater width - if you've cloned the text into a div without a width and white-space nowrap, you would expect the cloned div to be wider than the original container if there would have been a wrap in the original — TimCodes.NET, May 14 '13 at 21:51
The first answer looks quite ok... But I thought about that what Chimoo said you just need to check on br, hr and display block Elements etc. and "restart" after'em and you can calculate the position of the arrow via line-height. — noob, May 14 '13 at 21:59

score 2 · Answer 1 · answered May 14 '13 at 21:48

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.

Almost right, on my screen. The blue arrows show, but also on empty space lines. That is when I paste the Lorem Ipsum text. — RST, May 14 '13 at 21:55
@daniel: Yep I was also thinking about a fixed line height solution — zerkms, May 14 '13 at 21:58

score 2 · Accepted Answer · edited May 23 '17 at 10:29

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?

score 1 · Answer 3 · answered May 14 '13 at 22:07

1

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

answered May 14 '13 at 22:07

daniel

1,435
9
16

Just change: t.text() to t.html() , quick fix :) – daniel May 14 '13 at 22:21
There was a reason for that... all the other elements don't work, because only br was implemented. – noob May 14 '13 at 22:31
Tried
and
, no problems!
– daniel May 14 '13 at 22:32
http://jsfiddle.net/yL9gU/16/ --- need to style the
of course to be all white at the end and cover the blue square – daniel May 14 '13 at 22:42
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/29949/discussion-between-mic-and-daniel) – noob May 14 '13 at 22:45

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

3 Answers3