перенести flex элемент на новую строку
Есть flex-контейнер с flex-элементами внутри, которые расположены в колонки равной ширины. можно ли как-то сделать так, чтобы первый flex-элемент располагался в строку, то есть занимал всю ширину контейнера, а остальные flex-элементы также располагались в колонки, как раньше.
.flex-container < display: flex; >.flex-element
a b c d e Отслеживать
9,644 4 4 золотых знака 35 35 серебряных знаков 72 72 бронзовых знака
CSS отступ справа при переносе строк
Коллеги, всем привет. Верстаю не часто, что-то тупняк напал. Надо сверстать два элемента в строку, в левой колонке какой-то текст. Когда уменьшаем разрешение, текст перестает влазить — переносится на новую строку (это окей), но появляется отсуп справа от текста (это не окей). В примере второй блок и отсуп справа в красной части. Вот как бы от него избавится. Сверстать можно как угодно, флексы не принципиальны. UPD: Не все поняли. Второй блок ограничен 300px специально, для демонстрации этого эффекта (как-будто мы открыли на мобильном, блок не влез и немного ужался). Естестевенно, на проекте этого нет.
.container < display: flex; margin-bottom: 15px; >.first < background-color: red; >.second < background-color: yellow; flex-grow: 1; >.max-width
qweqweqweqweq qweqweqwe qweqweqwe 123 qweqweqweqweq qweqweqwe qweqweqwe 123 Отслеживать
Александр Рогонов
задан 30 дек 2022 в 21:36
Александр Рогонов Александр Рогонов
783 4 4 серебряных знака 10 10 бронзовых знаков
Насколько я представляю, это невозможно без скриптов.
31 дек 2022 в 0:18
word-break: break-all; только может и один символ от слова перенести на следующую строку..
31 дек 2022 в 5:55
Не вижу отступов
31 дек 2022 в 11:23
@Arcadiy, смотри лучше.
6 янв в 1:53
Есть какая-то информация по «балансу» ширины левого и правого элементов? «Схлопываться» по ширине контента «умеет» ячейка таблицы. Остальные display просто «занимают некое пространство», а контент «размещается» уже «как получится».
7 янв в 10:18
5 ответов 5
Сортировка: Сброс на вариант по умолчанию
Из того, что я знаю о формировании блочного контекста, такое сделать на чистом CSS нельзя. Есть костыльное решение с оберткой для инлайн-контента
window.addEventListener('DOMContentLoaded', () => < const wrapper = document.querySelector('.first-modified') const width = document.querySelector('.first__inline').offsetWidth + 1 + 'px' wrapper.style.width = width >).container < display: flex; margin-bottom: 15px; >.first, .first-modified < background-color: red; >.second < background-color: yellow; flex-grow: 1; >.max-width
qweqweqweqweq qweqweqwe qweqweqwe 123 qweqweqweqweq qweqweqwe qweqweqwe qweqweqweqweq qweqweqwe qweqweqwe qweqweq qweqweqwe qweqweqwe 123 Отслеживать
ответ дан 9 янв в 11:26
Sasha Omelchenko Sasha Omelchenko
12.8k 4 4 золотых знака 32 32 серебряных знака 61 61 бронзовый знак
Спасибо за ответ! Ну, я в целом так и подозревал. Так, думал вдруг что не знаю, хотелось без костыля. Осталось последить за изменением экрана и вуаля. Дам ещё пару дней (вдруг кого осенит) и приму ответ.
10 янв в 13:12
Наверное, это очень глупо, но что бы не было «отступа» справа от второго блока убери класс max-width у элемента оббертки. Строчные элементы занимают доступное место контента, а этим классом ты строго ограничиваешь расположение элементов. Если тебе просто что б первые колонки были не меньше 300px то можно гридами сделать.
.container < display: grid; margin-bottom: 15px; grid-template-columns: minmax(300px, 1fr) 1fr; >.first < background-color: red; >.second
qweqweqweqweq qweqweqwe qweqweqwe 123 qweqweqweqweq qweqweqwe qweqweqwe 123 Отслеживать
ответ дан 7 янв в 19:07
BlackStar1991 BlackStar1991
5,813 3 3 золотых знака 19 19 серебряных знаков 60 60 бронзовых знаков
Привет. Спасибо за ответ. Возможно я как-то не правильно выразился. У этого блока нет ограничения по ширине. Текст в левой части занимает всё доступное пространство. А в правой просто лежит нечто, в нашем примере «123». Проблемы возникают тогда, когда контент в левой части не помещается на экран, например на мобильном. Моё ограничение у второго примера (в 300пикселей в ширину) как раз и демострирует такой пример. Контент в левой части не вошел и слово было перенесено на следующую строчку, а так же, браузер, сделал отступ справа от текста. Вот я ищу способ от него избавиться.
8 янв в 1:58
Что вы хотите что б было с текстом в левой стороне если он не помещаеться? 1)Он переносился на новую строку 2) Он ограничивался. Если первый вариант, то ответ дан, на гридах. Если текст не должен ломать верстку и его отображение не важно. (например технический вывод) можно задать левому блоку position:relative; overflow:hidden;
8 янв в 11:19
Привет. Спасибо за ответ! То, что я хочу очень хорошо описано в вопросе. Я хочу чтобы текст перенесся на другую строчку. Вот ваш пример rogonov.w3spaces.com/123.html посмотрите его. Сделайте через инспектор ширину экрана 730 пикселей и вы увидите в верхнем блоке, в левой части отступ справа.
8 янв в 16:06
748 <-->749 пикселей. вот на этой границе слово переносится и на 748 пикселей и меньше появляется отступ.
8 янв в 16:10
update: вариант решения добавлен внизу
Сперва хотелось бы узнать, что именно вы хотите увидеть в итоге.
Раз вам не нравится отступ, вам его надо заполнить содержимым (текстом). Текст надо откуда-то взять. Варианты у вас такие:
- Переносить слова тупо по мере достижения ими границы блока ( word-break:break-all ). Выглядит отвратительно.
- Переносить слова по встроенному в браузер словарю ( hyphens:auto ). Это требует указания языка в атрибутах элемента, не во всех браузерах работает в принципе и, разумеется, не сработает для слова, которого в словаре нет.
- Переносить слова по заданным в контенте символам мягкого переноса ( ). Отлично работает, но сперва нужно подготовить контент — вставить этот символ во все места, где словам разрешено переноситься. То есть, или заранее писать контент с ними ( метилизоарсенилгидрохлорид ), или скриптом расставлять на лету (если напишете скрипт, который сумеет грамматически верно это сделать для любых слов, сможете поднять несколько миллиардов баксов, хех).
- растянуть слова в строке таким образом, чтобы текст был и слева (в начале), и справа (где был отступ) с помощью text-align:justify . При этом увеличатся расстояния между словами, и чем меньше слов поместится в строку, тем похабнее выглядит результат.
- попытаться исправить предыдущий пункт, подгоняя расстояние между символами ( letter-spacing ). Но тут может сработать и в обратную сторону — где-нибудь разопрет и вместо N слов впритык поместится N-1 с разрядкой.
.container < display: flex; margin-bottom: 15px; >.first < background-color: red; >.second < background-color: yellow; flex-grow: 1; >.max-width
Оригинал: qweqweqweqweq qweqweqwe qweqweqwe qweqweqweqweqqweqqweqweweqwe qweqweqwe qweqweqweqweq qweqweqwe qweqweqwe 123 qweqweqweqweq qweqweqwe qweqweqwe qweqweqweqweqqweqqweqweweqwe qweqweqwe qweqweqweqweq qweqweqwe qweqweqwe 123
с text-align: justify qweqweqweqweq qweqweqwe qweqweqwe qweqweqweqweqqweqqweqweweqwe qweqweqwe qweqweqweqweq qweqweqwe qweqweqwe 123 qweqweqweqweq qweqweqwe qweqweqwe qweqweqweqweqqweqqweqweweqwe qweqweqwe qweqweqweqweq qweqweqwe qweqweqwe 123 с word-break: break-all; qweqweqweqweq qweqweqwe qweqweqwe qweqweqweqweqqweqqweqweweqwe qweqweqwe qweqweqweqweq qweqweqwe qweqweqwe 123 qweqweqweqweq qweqweqwe qweqweqwe qweqweqweqweqqweqqweqweweqwe qweqweqwe qweqweqweqweq qweqweqwe qweqweqwe 123 добавляем letter-spacing qweqweqweqweq qweqweqwe qweqweqwe qweqweqweqweqqweqqweqweweqwe qweqweqwe qweqweqweqweq qweqweqwe qweqweqwe 123 qweqweqweqweq qweqweqwe qweqweqwe qweqweqweqweqqweqqweqweweqwe qweqweqwe qweqweqweqweq qweqweqwe qweqweqwe 123
уменьшаем красный блок до ширины контента (text-align: justify; flex:0 0; overflow-wrap: break-word;): qweqweqweqweq qweqweqwe qweqweqwe qweqweqweqweqqweqqweqweweqwe qweqweqwe qweqweqweqweq qweqweqwe qweqweqwe 123 qweqweqweqweq qweqweqwe qweqweqwe qweqweqweqweqqweqqweqweweqwe qweqweqwe qweqweqweqweq qweqweqwe qweqweqwe 123 то же самое, но без длиннющего слова: qweqweqweqweq qweqweqwe qweqweqwe qweqweq weq weq qweqqwe qweweqwe qweqweqwe qweqweqweqweq qweqweqwe qweqweqwe 123 qweqweqweqweq qweqweqwe qweqweqwe qweqweq weq weq qweqqwe qweweqwe qweqweqwe qweqweqweqweq qweqweqwe qweqweqwe 123 ограничиваем минимальную ширину, а то хрень получается (добавим, например, min-width: 200px;): qweqweqweqweq qweqweqwe qweqweqwe qweqweq weq weq qweqqwe qweweqwe qweqweqwe qweqweqweqweq qweqweqwe qweqweqwe 123 qweqweqweqweq qweqweqwe qweqweqwe qweqweq weq weq qweqqwe qweweqwe qweqweqwe qweqweqweqweq qweqweqwe qweqweqwe 123 Как сделать перенос блока на новую строку?
Как сделать так чтобы блоки размещались не в одну строку, а чтобы каждый блок с новой строки?
.dialog < box-shadow: 0 0 5px rgba(0,0,0,0.2); padding: 10px 30px; >.d-content < display: inline-block; padding: 10px; background: #dcf8c6; border-radius: 0.4em; margin-top: 5px; >.mess_username < color: #1d5987; font-weight: 700; font-size: 12px; >.mess_date < color: #6c757d; font-weight: 400; font-size: 12px; >.mess_text < display: flex; >.new-message
- Вопрос задан более двух лет назад
- 12530 просмотров
5 комментариев
Простой 5 комментариев
Ankhena @Ankhena Куратор тега CSS
Перестать задавать им inline-block.
Блочные элементы сами по себе располагаются с новой строки.
CSS — как сделать перенос ссылки на новую строку?
Добрый день, есть теги с ссылками, как сделать, чтобы ссылка, например: на скорую руку, переносилась, например, слово «На» на предыдущей строке, а «скорую руку» — на след. строке?
Показал на картинке.
- Вопрос задан более трёх лет назад
- 24837 просмотров
Комментировать
Решения вопроса 1
Еще можно попробывать word-wrap: break-word; если хотите, чтобы внутри слов переносы были
Ответ написан более трёх лет назад
Нравится 4 3 комментария
lindim3000 @lindim3000 Автор вопроса
Спасибо, ваш ответ помог.
@lindim3000 если ответ помог, то его следует отметить решением.