CSS: Горизонтальное расположение на основе различных размеров и пользовательской логики

Question

Я следующую структуру

<div class="c0"> 
    <span class="c1">"Text1: Some possibly long text"</span> 
    <span class="c2">Some icon is being displayed</span> 
    <span class="c3">"Text 3: Some possibly long text"</span> 
</div> 

Общая ширина, скажем 100px и ширина значка, скажем 20px. Макет должен быть:

1. Если длина Text1 и Text3 меньше 80px, то я хочу, чтобы показать всю строку, как это, с некоторым пространство, остающееся на левой стороне.
2. Если длина Text1 и Text3 более 80px и Текст1 меньше 40px и Text3 более 40px, я хотел бы, чтобы отобразить «Text1» «значок» "Text3 с многоточием усечения строка»
3. основном условие (2), за исключением text1 и text3 перепутаны
4. Если длина Text1 и Text3 более 80px и Текст1 больше, чем 40px и Text3 более 40px, я хотел бы отобразить «Text1 с эллипсисом, усекающим строку» «значок» «Text3 с эллипсис, усекающий строку "

Можно ли это сделать с помощью CSS? Я пробовал играть с Flexbox и так, но не смог понять, как добиться этого.

Answer 1

Вы можете укоротить строки с помощью CSS

.c1, .c3 { 
    width: 40px; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
} 

и HTML выглядит следующим образом:

<div class="c0"> 
    <div class="c1">"Text1: Some possibly long text"</div> 
    <div class="c2">Some icon is being displayed</div> 
    <div class="c3">"Text 3: Some possibly long text"</div> 
</div>