• 0
7ion

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

Вопрос

Есть блок, внутри которого текст, размечаемый юзером. У тега <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/

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

Изменено пользователем 7ion

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

6 ответов на этот вопрос

Рекомендуемые сообщения

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

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

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

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

  • Thanks 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0

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

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

Изменено пользователем AlexWeb

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0
5 часов назад, AlexWeb сказал:

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

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

Изменено пользователем 7ion

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0
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 нет? 

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0

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

  • Like 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Создайте аккаунт или войдите в него для комментирования

Вы должны быть пользователем, чтобы оставить комментарий

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.

Войти сейчас


Карта разработчиков

Карта участников

Отметь себя на карте для поиска или предложения работы