Должно получиться то, что выше. А получается только вначале и в конце строки, да еще и без border и shadows. И в ручную делить текст на разные строки не вариант: Контент генерируется пользователем. Я даже не знаю можно ли тут обойтись css.
1 ответ
Пожалуй, только при помощи js. Идея примерно такая:
var span = document.querySelector('span');
var rects = span.getClientRects();
var d = `M ${rects[0].left} ${rects[0].top} `;
for (var q=0; q<rects.length; ++q) {
d += `H ${rects[q].right} V ${rects[q].bottom} `;
}
for (var q=rects.length-1; q>-1; --q) {
d += `H ${rects[q].left} V ${rects[q].top} `;
}
d += 'Z';
var p = span.parentElement;
var bb = p.getBoundingClientRect();
var svg = `<svg viewBox="${bb.left} ${bb.top} ${bb.width} ${bb.height}">
<path d="${d}" />
</svg>`;
p.insertAdjacentHTML('beforeend', svg);
body {
width: 638px;
margin: auto;
}
p {
text-align: center;
position: relative;
}
span {
color: blue;
}
svg {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: -1;
overflow: visible;
}
path {
fill: antiquewhite;
stroke: red;
stroke-width: 1px;
}
<p>Давно выяснено, что при оценке дизайна и композиции <span>читаемый текст мешает сосредоточиться. Lorem Ipsum используют потому, что тот обеспечивает более или менее стандартное заполнение шаблона, а также реальное распределение букв и пробелов в абзацах, которое не получается при простой дубликации</span> "Здесь ваш текст.. Здесь ваш текст.. Здесь ваш текст.."</p>
-
-
@Abmin, но можно добавить. Я показал идею, как в принципе это можно сделать.– Qwertiy ♦Commented 7 июн. 2017 в 23:46
-
@Qwertiy А как же теперь добавить скругления отступы от текста? Подскажите, пожалуйста. Это нужно в svg что-то прописать? rx не работает. Commented 9 июн. 2017 в 13:10
-
@DenisKozlov, для скруглений надо использовать
a
в нужную сторону. При этом надо смотреть, делается поворот вправо или влево и отдельно обрабатывать случай, когда горизонтальное расстояние меньше удвоенного радиуса. А что касается отступа - просто прибавить или вычесть некоторую константу.– Qwertiy ♦Commented 9 июн. 2017 в 15:14 -