БЛОГ НА HUSL


CSS отступ справа при переносе строк

Автор вопроса: Александр Рогонов

Коллеги, всем привет.

Верстаю не часто, что-то тупняк напал.

Надо сверстать два элемента в строку, в левой колонке какой-то текст. Когда уменьшаем разрешение, текст перестает влазить - переносится на новую строку (это окей), но появляется отсуп справа от текста (это не окей).

В примере второй блок и отсуп справа в красной части. Вот как бы от него избавится. Сверстать можно как угодно, флексы не принципиальны.

UPD: Не все поняли. Второй блок ограничен 300px специально, для демонстрации этого эффекта (как-будто мы открыли на мобильном, блок не влез и немного ужался). Естестевенно, на проекте этого нет.

.container {
  display: flex;
  margin-bottom: 15px;
}

.first {
  background-color: red;
}

.second {
  background-color: yellow;
  flex-grow: 1;
}

.max-width {
  max-width: 300px;
}
<div class="container">
  <div class="first">
    qweqweqweqweq qweqweqwe qweqweqwe
  </div>
  <div class="second">
    123
  </div>
</div>

<div class="container max-width">
  <div class="first">
    qweqweqweqweq qweqweqwe qweqweqwe
  </div>
  <div class="second">
    123
  </div>
</div>

Спасибо!


Источник

Ответы (5 шт):

Автор решения: ksa

Рассматривается ли вариант с таблицами?

Ячейка "умеет убирать отступы" и "подстраиваться" под контент. Но нужно как-то разобраться с "балансом" ширины колонок...

Или можно разрешать/запрещать перенос внутри ячейки...

.container {
width: 100%;
margin-bottom: 15px;
}
.container td {
vertical-align: top;
}
.first {
width: 1%;
white-space: nowrap;
background-color: red;
}
.max-width .first {
width: 1%;
white-space: normal;
background-color: red;
}

.second {
background-color: yellow;
}

.max-width {
max-width: 300px;
}
<table class='container'>
    <tr>
        <td class='first'>qweqweqweqweq qweqweqwe qweqweqwe</td>
        <td class='second'>123</td>
    </tr>
</table>
<table class='container max-width'>
    <tr>
        <td class='first'>qweqweqweqweq qweqweqwe qweqweqwe</td>
        <td class='second'>123</td>
    </tr>
</table>

→ Ссылка
Автор решения: BlackStar1991

Наверное, это очень глупо, но что бы не было "отступа" справа от второго блока убери класс max-width у элемента оббертки. Строчные элементы занимают доступное место контента, а этим классом ты строго ограничиваешь расположение элементов. Если тебе просто что б первые колонки были не меньше 300px то можно гридами сделать.

.container {
  display: grid;
  margin-bottom: 15px;
  grid-template-columns: minmax(300px, 1fr) 1fr;
}

.first {
  background-color: red;
}

.second {
  background-color: yellow;
}
<div class="container">
  <div class="first">
    qweqweqweqweq qweqweqwe qweqweqwe
  </div>
  <div class="second">
    123
  </div>
</div>

<div class="container">
  <div class="first">
    qweqweqweqweq qweqweqwe qweqweqwe
  </div>
  <div class="second">
    123
  </div>
</div>

→ Ссылка
Автор решения: Sasha Omelchenko

Из того, что я знаю о формировании блочного контекста, такое сделать на чистом 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 {
  max-width: 300px;
}
<div class="container">
  <div class="first">
    qweqweqweqweq qweqweqwe qweqweqwe
  </div>
  <div class="second">
    123
  </div>
</div>

<div class="container max-width">
  <div class="first-modified">
    <span class="first__inline">
    qweqweqweqweq qweqweqwe qweqweqwe qweqweqweqweq qweqweqwe qweqweqwe qweqweq qweqweqwe qweqweqwe 
    </span>
  </div>
  <div class="second">
    123
  </div>
</div>

→ Ссылка
Автор решения: Инквизитор

update: вариант решения добавлен внизу

Сперва хотелось бы узнать, что именно вы хотите увидеть в итоге.

Раз вам не нравится отступ, вам его надо заполнить содержимым (текстом). Текст надо откуда-то взять. Варианты у вас такие:

  • Переносить слова тупо по мере достижения ими границы блока (word-break:break-all). Выглядит отвратительно.
  • Переносить слова по встроенному в браузер словарю (hyphens:auto). Это требует указания языка в атрибутах элемента, не во всех браузерах работает в принципе и, разумеется, не сработает для слова, которого в словаре нет.
  • Переносить слова по заданным в контенте символам мягкого переноса (&shy;). Отлично работает, но сперва нужно подготовить контент - вставить этот символ во все места, где словам разрешено переноситься. То есть, или заранее писать контент с ними (метил&shy;изо&shy;арсе&shy;нил&shy;гид&shy;ро&shy;хло&shy;рид), или скриптом расставлять на лету (если напишете скрипт, который сумеет грамматически верно это сделать для любых слов, сможете поднять несколько миллиардов баксов, хех).
  • растянуть слова в строке таким образом, чтобы текст был и слева (в начале), и справа (где был отступ) с помощью 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 {
  max-width: 300px;
}
Оригинал:
<div class="container">
  <div class="first">
    qweqweqweqweq qweqweqwe qweqweqwe qweqweqweqweqqweqqweqweweqwe qweqweqwe qweqweqweqweq qweqweqwe qweqweqwe
  </div>
  <div class="second">
    123
  </div>
</div>
<div class="container max-width">
  <div class="first">
    qweqweqweqweq qweqweqwe qweqweqwe qweqweqweqweqqweqqweqweweqwe qweqweqwe qweqweqweqweq qweqweqwe qweqweqwe
  </div>
  <div class="second">
    123
  </div>
</div>
<hr> с text-align: justify
<div class="container">
  <div class="first" style="text-align: justify;">
    qweqweqweqweq qweqweqwe qweqweqwe qweqweqweqweqqweqqweqweweqwe qweqweqwe qweqweqweqweq qweqweqwe qweqweqwe
  </div>
  <div class="second">
    123
  </div>
</div>
<div class="container max-width">
  <div class="first" style="text-align: justify;">
    qweqweqweqweq qweqweqwe qweqweqwe qweqweqweqweqqweqqweqweweqwe qweqweqwe qweqweqweqweq qweqweqwe qweqweqwe
  </div>
  <div class="second">
    123
  </div>
</div>

с word-break: break-all;
<div class="container ">
  <div class="first" style="word-break: break-all;">
    qweqweqweqweq qweqweqwe qweqweqwe qweqweqweqweqqweqqweqweweqwe qweqweqwe qweqweqweqweq qweqweqwe qweqweqwe
  </div>
  <div class="second">
    123
  </div>
</div>
<div class="container max-width">
  <div class="first" style="word-break: break-all;">
    qweqweqweqweq qweqweqwe qweqweqwe qweqweqweqweqqweqqweqweweqwe qweqweqwe qweqweqweqweq qweqweqwe qweqweqwe
  </div>
  <div class="second">
    123
  </div>
</div>

добавляем letter-spacing
<div class="container ">
  <div class="first" style="text-align: justify;    letter-spacing: 0.2vw;    word-break: break-word;">
    qweqweqweqweq qweqweqwe qweqweqwe qweqweqweqweqqweqqweqweweqwe qweqweqwe qweqweqweqweq qweqweqwe qweqweqwe
  </div>
  <div class="second">
    123
  </div>
</div>
<div class="container max-width">
  <div class="first" style="text-align: justify;    letter-spacing: 0.2vw;    word-break: break-word;">
    qweqweqweqweq qweqweqwe qweqweqwe qweqweqweqweqqweqqweqweweqwe qweqweqwe qweqweqweqweq qweqweqwe qweqweqwe
  </div>
  <div class="second">
    123
  </div>
</div>

<hr>
уменьшаем красный блок до ширины контента (text-align: justify;    flex:0 0;    overflow-wrap: break-word;):
<div class="container ">
  <div class="first" style="text-align: justify;    flex:0 0;    overflow-wrap: break-word;">
    qweqweqweqweq qweqweqwe qweqweqwe qweqweqweqweqqweqqweqweweqwe qweqweqwe qweqweqweqweq qweqweqwe qweqweqwe
  </div>
  <div class="second">
    123
  </div>
</div>
<div class="container max-width">
  <div class="first" style="text-align: justify;    flex:0 0;      overflow-wrap: break-word;">
    qweqweqweqweq qweqweqwe qweqweqwe qweqweqweqweqqweqqweqweweqwe qweqweqwe qweqweqweqweq qweqweqwe qweqweqwe
  </div>
  <div class="second">
    123
  </div>
</div>

то же самое, но без длиннющего слова:
<div class="container ">
  <div class="first" style="text-align: justify;    flex:0 0;    overflow-wrap: break-word;">
    qweqweqweqweq qweqweqwe qweqweqwe qweqweq weq weq qweqqwe qweweqwe qweqweqwe qweqweqweqweq qweqweqwe qweqweqwe
  </div>
  <div class="second">
    123
  </div>
</div>
<div class="container max-width">
  <div class="first" style="text-align: justify;    flex:0 0;      overflow-wrap: break-word;">
    qweqweqweqweq qweqweqwe qweqweqwe qweqweq weq weq qweqqwe qweweqwe qweqweqwe qweqweqweqweq qweqweqwe qweqweqwe
  </div>
  <div class="second">
    123
  </div>
</div>

ограничиваем минимальную ширину, а то хрень получается (добавим, например, min-width: 200px;):
<div class="container ">
  <div class="first" style="text-align: justify;    flex:0 0;  min-width: 200px;  overflow-wrap: break-word;">
    qweqweqweqweq qweqweqwe qweqweqwe qweqweq weq weq qweqqwe qweweqwe qweqweqwe qweqweqweqweq qweqweqwe qweqweqwe
  </div>
  <div class="second">
    123
  </div>
</div>
<div class="container max-width">
  <div class="first" style="text-align: justify;    flex:0 0;  min-width: 200px;    overflow-wrap: break-word;">
    qweqweqweqweq qweqweqwe qweqweqwe qweqweq weq weq qweqqwe qweweqwe qweqweqwe qweqweqweqweq qweqweqwe qweqweqwe
  </div>
  <div class="second">
    123
  </div>
</div>

→ Ссылка
Автор решения: Daniil Loban

Кажется я понял, нужна динамическая ширина первой колонки, чтобы не было отступа, единственное решение без скрипта которое я вижу это использовать text-align: justify; - выравнивание как в Word.

введите сюда описание изображения

.container {
  display: flex;
  margin-bottom: 15px;
}

.first {
  background-color: red;
  text-align: justify;
}

.second {
  background-color: yellow;
  flex-grow: 1;
}

.max-width {
  max-width: 300px;
}
<div class="container">
  <div class="first">
    qweqweqweqweq qweqweqwe qweqweqwe
  </div>
  <div class="second">
    123
  </div>
</div>

<div class="container max-width">
  <div class="first">
    qweqweqweqweq qweqweqwe qweqweqwe
    qweqweqweqweq qweqweqwe qweqweqwe
  </div>
  <div class="second">
    123
  </div>
</div>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.