0

Есть вот такой код в котором в одной полосе выводится 2 блока. Задача такая:

  • левый блок занимает всё место, которое не занимает правый блок (пропусков между блоками нет)
  • размер правого блока не известен и зависит от контента
  • общий блок не имеет фиксированного размера, а только относительный (для удобства демонстрации сделал его 300px, но в жизни он 100%)
  • в левом блоке текст

это все сделано и работает корректно, но вот как реализовать еще 2 следующих условия?

  • текст в левом блоке вне зависимости от размера не приводит к увеличению размера блоке, что приводит к отодвиганию правого блока за границы основного блока
  • вместо этого текст обрезается до вида ... (правда это можно сделать, как я понимаю, только задав абсолютный размер блока)
  • или уменьшается в размере, чтобы полностью влезть в левый блок

.block  {
  width:              100%;
  width:              300px;

  display:            flex;
  flex-direction:     row;
  flex-wrap:          nowrap;
  justify-content:    space-between;
  align-items:        center;

  border:             1px solid black;
}

.title {
  align-self:         stretch;
  flex-grow:          1;

  line-height:        75px;

  font-size:          32px;
  font-family:        Verdana;

  text-align:         center;
  text-transform:     uppercase;
  text-overflow:      ellipsis;
  white-space:        nowrap;
}

.statistics {
  margin-right:       20px;
  
  background:         red;
}
<div class='block'>
  <div class='title'>Ну просто неприлично длинный текст</div>
  <div class='statistics'>146%</div>
</div>
  

2
  • 1
    Примените overflow: hidden; на .title.
    – ΝNL993
    25 мар в 21:23
  • @ΝNL993, да, точно, спасибо! А как сделать так, что текст влезал целиком - например размер шрифта 32px - это максимум, а так он может и 20 и 12 в зависимости от ширины блока
    – Zhihar
    25 мар в 21:36

2 ответа 2

1

это максимум, а так он может и 20 и 12 в зависимости от ширины блока в зависимости от ширины блока конечно не получилось (получилось от ширины viewport'а, но т.к. сам блок 100%, считайте что это одно и тоже), но максимум я выставил 32px, для этого я использовал функцию min, которая выбирает наименьшее значение, то есть получилась такая логика:

  • Если 5vw больше чем 32px, тогда выбрать 32px.
  • Если 5vw меньше чем 32px, тогда выбрать 5vw.

То есть, если 32px максимальный размер.

.block  {
  width:              100%;

  display:            flex;
  flex-direction:     row;
  flex-wrap:          nowrap;
  justify-content:    space-between;
  align-items:        center;

  border:             1px solid black;
}

.title {
  align-self:         stretch;
  flex-grow:          1;

  line-height:        75px;

  font-size:          min(5vw, 32px);
  font-family:        Verdana;

  text-align:         center;
  text-transform:     uppercase;
  text-overflow:      ellipsis;
  white-space:        nowrap;
  overflow:           hidden;
}

.statistics {
  margin-right:       20px;
  
  background:         red;
}
<div class='block'>
  <div class='title'>Ну просто неприлично длинный текст</div>
  <div class='statistics'>146%</div>
</div>

1

.block  {
  width: 300px;
  display: grid;
  grid-template-columns: 1fr min-content;
  align-items: center;
  border: 1px solid black;
  white-space: nowrap;
}

.title {
  overflow: hidden;
  text-overflow: ellipsis;

  line-height: 75px;
  font-size: 32px;
  font-family: Verdana;
  text-transform: uppercase;
}

.statistics {
  background: red;
}
<div class='block'>
  <div class='title'>Ну просто неприлично длинный текст</div>
  <div class='statistics'>146%</div>
</div>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.