2

Вот что должно получится!

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

2
  • 1
    на css пожалуй нельзя. Commented 7 июн. 2017 в 20:42
  • нужно каждую строку чем то обгорнуть и с помощью js проверять верхнюю и нижнюю строку на количество символов.
    – Abmin
    Commented 7 июн. 2017 в 20:56

1 ответ 1

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>

5
  • не правильно, здесь нет закругленных углов.
    – Abmin
    Commented 7 июн. 2017 в 22:17
  • @Abmin, но можно добавить. Я показал идею, как в принципе это можно сделать.
    – Qwertiy
    Commented 7 июн. 2017 в 23:46
  • @Qwertiy А как же теперь добавить скругления отступы от текста? Подскажите, пожалуйста. Это нужно в svg что-то прописать? rx не работает. Commented 9 июн. 2017 в 13:10
  • @DenisKozlov, для скруглений надо использовать a в нужную сторону. При этом надо смотреть, делается поворот вправо или влево и отдельно обрабатывать случай, когда горизонтальное расстояние меньше удвоенного радиуса. А что касается отступа - просто прибавить или вычесть некоторую константу.
    – Qwertiy
    Commented 9 июн. 2017 в 15:14
  • @Qwertiy Спасибо Commented 9 июн. 2017 в 15:30

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.