css: адаптивный размер текста (в зависимости от ширины блока)

Question

Есть вот такой код в котором в одной полосе выводится 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>

Answer 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>

Answer 2

.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>

БЛОГ НА HUSL

css: адаптивный размер текста (в зависимости от ширины блока)

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