Предположим, что у нас есть контейнер div, который содержит некоторый многострочный текст, и некоторые из этих строк завернуты.
Можно ли добавить изображение, чтобы указать, что определенная строка завернута, а не другая строка, разделенная на <br>?
Требуемый образец из Notepad ++:
Песочница: http://jsfiddle.net/yL9gU/
Я сомневаюсь, что это можно сделать, не меняя BR на DIV, потому что кажется, что BRs очень сложно стилизовать:
Можете ли вы настроить таргетинг < br/ > с помощью css?
Вот простое чистое решение CSS, которое требует, чтобы BRs были изменены на 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: " ";
}
Если вы можете быть удовлетворены решением JS, возможно, что-то здесь поможет:
Это то, что вы ищете:
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://iany.me/2012/02/css-line-wrap-indicator/
URL-адрес изображения в jsfiddle не разрешается, поэтому вы не увидите его работу, но замените его на другой URL-адрес изображения, и он будет работать так, как вам нужно.
Он также указывает на левую сторону, где линия продолжается, но вы можете вырезать эту часть.
Даже если он плохо тестируется, я думаю, что это может быть близко к тому, что вы хотите: http://jsfiddle.net/yL9gU/9/
К сожалению, пришлось использовать lettering.js, поэтому не смог сохранить его чистым CSS, см. здесь: http://letteringjs.com/
См. спецификации для нескольких фонов здесь, не работает в IE8:
http://caniuse.com/#feat=multibackgrounds