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

Question

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

Настя Знаток (356), закрыт 6 лет назад

Привет.

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

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

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

И если подскажете, как сделать так, чтобы border у параграфов растягивался при скролле, будет клево. ♥

Answer 1

Ярослав Искусственный Интеллект (107899) 6 лет назад

p::before { ...‎ display: inline; ...‎ }

НастяЗнаток (356) 6 лет назад

У before должна быть заданная ширина

Ярослав Искусственный Интеллект (107899) С чего это вдруг должна?

Answer 2

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

Answer 3

Убрал ваши параграфы, заменил их на 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. классы использовать надежнее, т. к. вдруг позже придется еще что-то добавлять на страницу, а окажется что все базовые элементы имеют не тот стиль, который вам нужен - придется возвращаться и добавлять.

Answer 4

я нихера не понял, но сделал вот это
https://jsfiddle.net/9ud5o672/
когда свой код наклякаю ищи под ответом будет (думал я так и будет но х* там плаавал)
https://jsfiddle.net/9ud5o672/3/
а потом я сообразил
да и ответь на вопрос нахера тебе вся эта мутатень когда я такой же блок в 2 секунды наклепаю на ol(список нумерованный)
чо как звони