Не сокращать текст тогда, когда есть место для более широкого блока

Question

* {
    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>

Как сделать так, чтобы текст во второй строчки сокращался только в том случаи если дальнейшее расширение родителя невозможно.

То есть когда есть еще место, чтобы родитель был поболее, дабы не сокращать. Ширина блока увеличивалась по ширине дочерних блокв...

Answer 1

Процентный размер картинки li svg { width: clamp(24px, 8%, 40px); } дает неадекватное отображение размеров всего блока, в остальном см. комментарии ниже.

* {
    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; */
  /* + */ width: max-content;
  /* + */ max-width: 100%; /* максимальная ширина по ширине родителя */
  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); проценты неадекватую ширину дают*/ 
    /* + */ width: clamp(24px, 36px, 40px);
    min-width: 24px;
}

.name {flex: 1}
.param {font-size: calc(10px + 2 * ((100vw - 320px) / 1000)); padding: 0 15px;}

<h2>П1. Контента мало</h2>
<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>

<br />
<h2>П2. medium</h2>
<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>

<br />
<h2>П3. Контент на всю ширину строки</h2>
<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>

БЛОГ НА HUSL

Не сокращать текст тогда, когда есть место для более широкого блока

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