That's what should work!

That should turn out to be higher. And it turns out only at the beginning and at the end of the line, and even without the border and shadows. And to manually divide the text into different lines is not an option: Content is generated by the user. I do not even know whether it is possible to do with css.

  • one
    on css perhaps not. - Andrey Fedorov
  • you need to burn each line with something and with the help of js check the top and bottom lines for the number of characters. - Abmin

1 answer 1

Perhaps only with the help of js. The idea is something like this:

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>

  • not right, there are no rounded corners. - Abmin
  • @Abmin, but you can add. I showed the idea how in principle this can be done. - Qwertiy ♦
  • @Qwertiy Now how do I add rounding offsets from the text? Tell me please. Is it necessary to prescribe something in svg? rx does not work. - Denis Kozlov
  • @DenisKozlov, for rounding, you must use a in the right direction. In this case, it is necessary to look, turn to the right or to the left and separately handle the case when the horizontal distance is less than twice the radius. As for the indent, just add or subtract a constant. - Qwertiy ♦
  • @Qwertiy Thank you - Denis Kozlov