Схлопнуть padding и убрать border-radius у подряд идущих inline

[7ion]

Есть блок, внутри которого текст, размечаемый юзером. У тега <i> задан цвет фона, padding, background-color.

Сказка кончается, когда юзер в сообщении делает, например, [ i ]та[ /i ][ i ]к[ /i ]. В итоге у нас слово, порванное посередине отступом и border-radius.

Нормализовать код на стороне сервера нельзя, только css, только хардкор.

Я изрядно поломал голову. Нужно, если у элемента <i> есть непосредственный сосед <i> - без любых нод между ними - соседу обрезать padding и border-radius слева, а элементу - справа. При помощи вспомогательного <span>, :first-of-type, :last-of-type и селектора-плюсика я нагородил что-то похожее на правду: https://jsfiddle.net/qqhwcy79/

Однако, все ломается, если между элементами поставить простой текст. Для плюсика сосед через textNode - тоже сосед.  https://jsfiddle.net/qqhwcy79/2/

Ну и наконец, никакой обертки из <span> в реальной жизни у меня не будет. В реальной жизни верстка будет такой https://jsfiddle.net/qqhwcy79/3/

Как это сверстать, чтобы схлопнуть два элемента, если они непосредственные соседи?

Edited December 6, 2017 by 7ion

[SelenIT]

16 часов назад, 7ion сказал:

без любых нод между ними

Вот это, к сожалению, CSS-ом сейчас никак не описать. Ни плюсик, ни тильда не умеют проверять наличие/отсутствия текстовых нод. Умеет только :empty, но он, очевидно, тут не подходит.

Так что добавлять padding инлайновым элементам, над которыми нет полного контроля — изначально была не лучшая идея. Теперь, если юзер сделал бяку, придется терпеть :(. Можно разве что немного смягчить последствия бяки отрицательными margin-ами, прозрачностью у фона и разрядкой букв, чтобы стыки padding-ов внутри были не так заметны, типа такого...

[AlexWeb]

Если скриптом разбить все слова на span, то тогда можно определить "непосредственных соседей".

Если убрать отступы и радиус скругления, то никаких проблем.

Edited December 7, 2017 by AlexWeb

[7ion]

5 часов назад, AlexWeb сказал:

Если скриптом разбить все слова на span, то тогда можно определить "непосредственных соседей".

Никаких скриптов, должен быть чистый CSS.

Edited December 7, 2017 by 7ion

[Switch74]

на уровне php или js при записи текста нужно резать все </li><li>, чистым css пока хз как сделать

[7ion]

9 часов назад, SelenIT сказал:

Можно разве что немного смягчить последствия бяки отрицательными margin-ами

SelenIT, отлично, именно то, что мне нужно, спасибо! Для сносного результата достаточно поиграть с левыми-правыми padding и margin. https://jsfiddle.net/94br7sed/1/

Очередные грабли.

Парсер позволяет получить на выходе пустой <i></i>. Чтобы его не было видно, добавил i:empty { padding: 0; margin: auto; }.

Чтобы при вложенных <i> не множились поля, добавил i > i { padding-left: 0; padding-right: 0; margin: auto; }.

А вот на <i> с пустым дитём (<i><i></i></i>) ни одно правило не сработает, будет белая палочка https://jsfiddle.net/94br7sed/3/

Всё, решения на CSS нет? 

 

[SelenIT]

Боюсь, что нет:(. Родительского селектора пока ни один браузер ни в каком виде не реализовал...