Верстка, CSS, HTML, SVG

Как запретить перенос строки между ::before и параграфом?

Привет.

Есть блок с фиксированной шириной и горизонтальным скроллом, внутри блока параграфы.
У параграфов есть before, с display: inline-block, ибо мне нужно задавать им ширину.
Если параграф будет содержать в себе слово, длинна которого превышает ширину блока, то before останется на одной строке, а текст перенесется на следующую.

https://jsbin.com/badodegoku/edit?html,css,output

Вопрос - как "приклеить" before к <p и избежать переноса?

И если подскажете, как сделать так, чтобы border у параграфов растягивался при скролле, будет клево. ♥
ИА
Иван Астанин
355
p::before { ...‎ display: inline; ...‎ }
Владимир Гараган
Владимир Гараган
55 435
Лучший ответ
Иван Астанин У before должна быть заданная ширина
Убрал ваши параграфы, заменил их на span. Потому что у него есть такая фишка, что если задать margin или padding слева, то сдвинется только первая строчка, а на весь остальной текст это не повлияет (в случае параграфа - сдвигается весь абзац)

Добавил такой отступ, а сам элемент before сделал с абсолютной позицией и через отрицательный margin-left сдвинул их налево)

https://jsbin.com/fowopihehu/1/edit?html,css,output - во.

.div:nth-child(odd) .span - такая запись двух классов через пробел, означает "все элементы с классом .span, которые находятся внутри .div"

А как растянуть бордеры - не знаю.
Думал вообще убрать эти бордеры и между всеми элементами дополнительно ввести div с нулевой высокой и 1рх бордером, и уже его попробовать растянуть, возможно уже через JavaScript...

p.s. классы использовать надежнее, т. к. вдруг позже придется еще что-то добавлять на страницу, а окажется что все базовые элементы имеют не тот стиль, который вам нужен - придется возвращаться и добавлять.
Kamal ***
Kamal ***
62 360
Иван Астанин Спасибо, подтолкнули на мысль. Только менять p на span и тем более обертку делать - это не вариант в моем случае :(

Проблему с переносом решила через добавление display: inline-flex к параграфам и width: 100%. Но что с рамкой делать не знаю: элемент с большой шириной растянет родителя и сломает скролл.

Про классы: это просто пример и стили заданы тэгам просто чтобы было проще ориентироваться и воспринимать. В реальном коде, естественно, не так.
я нихера не понял, но сделал вот это
https://jsfiddle.net/9ud5o672/
когда свой код наклякаю ищи под ответом будет (думал я так и будет но х* там плаавал)
https://jsfiddle.net/9ud5o672/3/
а потом я сообразил
да и ответь на вопрос нахера тебе вся эта мутатень когда я такой же блок в 2 секунды наклепаю на ol(список нумерованный)
чо как звони
ВБ
Виктор Благирев
3 612
Иван Астанин White-space pre не подходит, т. к. нужен перенос. Скролл для длинных строчек.

Надо это затем, что я так хочу, и обе проблемы уже решены через пару стилей, структуру менять не пришлось. Можешь сделать себе нумированный список, на здоровье, мне он не нужен.

Косаря не будет, не заслужил.
Нн устаю прокленать разработчиков моего тексього редактора (у меня обычный офис с красной эмблемой W). Вот на нужна функция, что когда пишешь текст, и вдруг нужно убрать символ из уже написанного то либо выделяется кусок ранее выбранного текста, либо он туда копируется, что приводит к утере содержимого и всяким казусам. А если всего однажды скопируешь в текст таблицу, то перенос слов целиком нн будет работать ни где. Фото вставишь, так там вообще замучаешься редактировать, то что было перед ним.
Так что у вас ещё и нет проблем.
Alex Luminoso
Alex Luminoso
196

Похожие вопросы