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