1

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

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

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

1 ответ 1

3
+50

Процентный размер картинки 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>

Ваш ответ

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

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