When a line of text is wrapped in a block element I would like to display a visual indicator that the text is wrapped as opposed to containing an explicit line break character. However, mdn does not list any selector along the lines of ::after-breaks or ::wrap.
Supposing there were such a thing, I would essentially write the following CSS (↩ is ↩)
.line-text::after-break {
content: ↩
}
Does anyone know how this can be achieved? CSS is preferable but js is acceptable.
To expand on the use-case, since Ouroborus' comment shows the context is significant, the text being wrapped is source code. As a result I don't have any control over it. Although I could do pre-processing in my rendering pipeline, I cannot compute line-break positions because these may change as a result of undetectable user interaction with the browser such as changing margins, paper size or orientation when printing.
Maybe not a solution - but hopefully helpful :)
The idea is simple: Repeat an image at the right side of the code-containing box - in case its okay to put the newline-icon/char at the far right and not the actual break.
You'll have to replace the linear gradient by an image, or an inline-image (data:image[...])
.code {
width: 200px;
line-height: 15px;
background: repeating-linear-gradient(#000, #DDD 1px, #FFF 15px);
background-size: 15px 30px;
background-repeat: repeat-y;
background-position: top right;
padding-right: 15px;
}<div class="code">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>