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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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