* {
position: relative;
padding: 0;
margin: 0;
outline: none;
letter-spacing: 1px;
box-sizing: border-box;
scroll-behavior: smooth;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
.eps {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
ul {
border-radius: 5px;
background: rgb(28 28 28 / 90%);
width: min-content;
color: #fff !important;
fill: #fff;
white-space: nowrap;
transition: all 150ms ease-in-out;
font-size: calc(13px + 3 * ((100vw - 320px) / 1000));
}
li {
cursor: pointer;
display: flex;
align-items: center;
gap: 10px;
padding: 10px;
}
li svg {
width: clamp(24px, 8%, 40px);
min-width: 24px;
}
.name {flex: 1}
.param {font-size: calc(10px + 2 * ((100vw - 320px) / 1000)); padding: 0 15px;}
<ul>
<li>
<svg viewBox="0 0 24 24"><path d="M7 7H17V10L21 6L17 2V5H5V11H7V7ZM17 17H7V14L3 18L7 22V19H19V13H17V17Z"></path></svg>
<div class="name eps">Текст текст текст</div>
<div class="param">param</div>
</li>
<li>
<svg viewBox="0 0 24 24"><path d="M7 7H17V10L21 6L17 2V5H5V11H7V7ZM17 17H7V14L3 18L7 22V19H19V13H17V17Z"></path></svg>
<div class="name eps">ТекстТекстТекстТекст текст текст</div>
<div class="param">paramparam</div>
</li>
</ul>
Как сделать так, чтобы текст во второй строчки сокращался только в том случаи если дальнейшее расширение родителя невозможно.
То есть когда есть еще место, чтобы родитель был поболее, дабы не сокращать. Ширина блока увеличивалась по ширине дочерних блокв...