Как сделать span c border-radius на каждой строке?

275

10 июня 2017, 14:36

Должно получиться то, что выше. А получается только вначале и в конце строки, да еще и без border и shadows. И в ручную делить текст на разные строки не вариант: Контент генерируется пользователем. Я даже не знаю можно ли тут обойтись css.

Answer 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>