Переполнение: скрыто и многоточие не работает с background-image перед текстом, чтобы скрыть

Question

У меня есть текст, который я хочу скрыть с помощью многоточия. Но когда перед текстом находится фоновое изображение в div, оно не работает, https://jsfiddle.net/ypbgkrod/6/,

.block {
  display: flex;
  margin-top: 0.3em;
}

.summary-content {
  margin-left: 0.2rem;
  width: 100%;
}

.summary-content .description {
  overflow: hidden;
  width: 100%;
}

.ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

<div class="block">
  <div class="thumbnail">
    <div class="thumb" role="img" style="background-image: url(''); height: 73px; width: 130px;"></div>
  </div>
  <div class="summary-content" data-permlink="i-want-more-of-my-life">
    <div class="description">
      <p class="ellipsis">Some random text that is long, long…Some random text that is long, long…Some random text that is long, long…Some random text that is long, long…</p>
    </div>
    <div class='slider'>
      Need this to not overflow hide. Need this to not overflow hide. Need this to not overflow hide.
    </div>
  </div>
</div>

При удалении раздела <div class="thumbnail"> текстовые многоточия скрываются и переполняются скрытыми работами, при этом часть для ползунка также работает, не будучи скрытой.

Это не полностью оригинальная проблема, так как я попытался решить проблему ниже, выполнив вышеуказанное, но я не мог заставить многоточие переполнения работать с требуемым текстом.

Контекст оригинальной проблемы:

Первоначальный код состоял в том, что у меня есть всплывающий div с ползунком, который должен пройти через переполненный div, но это не так, и он прерывается, когда заканчивается .block div. При удалении переполнения, скрытого на элементе .summary-content, ползунок полностью появляется, но многоточие не работает.

Многоточие текста работало с изображением, но это было тогда, когда не было лишних <div class="description">. Проблема в том, что он отрезал разделитель Slider с переполнением, скрытым на элементе summary-content, в котором был и слайдер.

.block {
  display: flex;
  margin-top: 0.3em;
}

.summary-content {
  margin-left: 0.2rem;
  width: 100%;
  overflow: hidden;
}

.ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

<div class="block">
  <div class="thumbnail">
    <div class="thumb" role="img" style="background-image: url(''); height: 73px; width: 130px;"></div>
  </div>
  <div class="summary-content" data-permlink="i-want-more-of-my-life">
    <p class="ellipsis">Some random text that is long, long…Some random text that is long, long…Some random text that is long, long…Some random text that is long, long…</p>
    <div class='slider'>slider</div>
  </div>
</div>

Поэтому, когда я добавил дополнительную инкапсуляцию (описание) для <p class="ellipsis">, <div class='slider'> больше не скрывается, но многоточие не работает. Я просто хотел, чтобы вы знали, что неработающий многоточие разрешается, когда у меня нет description div, но переполнение скрывает часть всплывающего окна Slider, которое находится внутри summary-content div, и я не могу иметь что.

Если бы вы могли получить первые HTML и CSS, чтобы скрыть переполнение текста многоточия, а не применить к ползунку, это было бы решением, которое я ищу, так как вторая часть кода не показывает вся проблема в том, чтобы проблема появилась в jsfiddle.

Спасибо!

Answer 1

Просто добавьте min-width: 0; в summary-content CSS .Спасибо

.summary-content {
    min-width: 0;
    width: 100%;
}

Answer 2

Есть 2 деления .thumbnail и .summary-content. Если вы установите ширину 100% для итогового контента, то он исчезнет с экрана, поэтому я добавил ниже CSS

.summary-content {
  width: 80%;
}

.block {
  display: flex;
}

.summary-content {
  width: 80%;
}

.summary-content .description {
  overflow: hidden;
  width: 100%;
}

.ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

<div class="block">
  <div class="thumbnail">
    <div class="thumb" role="img" style="background-image: url(''); height: 73px; width: 130px;"></div>
  </div>
  <div class="summary-content" data-permlink="i-want-more-of-my-life">
    <div class="description">
      <p class="ellipsis">Some random text that is long, long…Some random text that is long, long…Some random text that is long, long…Some random text that is long, long…</p>
    </div>
    <div class='slider'>
    Need this to not overflow hide. Need this to not overflow hide. Need this to not overflow hide.
    </div>
  </div>
</div>