Возможно ли автоматически "сгибать-сжимать" только элементы с большим содержанием?

ProgramBox

Возможно ли автоматически «сгибать-сжимать» только элементы с большим содержанием?

Post author:admin
Запись опубликована:11 января, 2022
Post category:Вопросы по программированию

#css #flexbox

Вопрос:

В контейнере со свойством display: flex; и фиксированным размером можно ли сжимать только дочерние элементы, которые заняли бы больше доступного пространства, если бы мы равномерно распределили его? Было бы тривиально заранее знать размеры контента, но я ищу решение, которое работает для динамического контента, не прибегая к Javascript.

Вот пример:

 .container {
  display: flex;
  width: 200px;
}
.item {
  flex: 0 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Making it prettier -- unrelated to the question */
.container {
  background-color: #cde;
  padding: 5px;
}
.item {
  margin: 0;
}
.item:not(:last-of-type) {
  margin-right: 5px;
}
.item:nth-child(1) {
  background-color: #dec;
}
.item:nth-child(2) {
  background-color: #ced;
}
.item:nth-child(3) {
  background-color: #dce;
}

 <div class="container">
  <p class="item">sm</p>
  <p class="item">paragraph with large content</p>
  <p class="item">another large content</p>
</div>

Мы видим, что для первого элемента буква m была частично вырезана (она уменьшилась). Учитывая, что этот элемент достаточно мал (я правильно определю это ниже) Я бы хотел, чтобы он не уменьшался, вот так:

Логика моя цель заключается в следующем: если мы распределяем ширину контейнера равномерно между n дочерними элементами каждый бы childWidth = parentWidth/n ; потом те, которые имеют ширину (по своему содержанию) меньше или равен этому значению не психиатр, а остальные сожмите в случае необходимости (это может быть так, что свободная площадь позволяет реализовать все пункты должны быть полностью отображается).

Возможно ли это только с помощью CSS?

1. вы пробовали min-width: min-content указать минимальную ширину-это минимальная ширина содержимого

2. @cursorsdottsx это не работает, потому что нам нужно иметь возможность предотвратить усадку для любого небольшого элемента (содержимое динамично для всех из них).

3. :в хм, тогда хорошо… если это динамично, то почему бы вам не использовать javascript для этого, я не могу придумать никакого чистого css-способа сделать это, если контент динамичен

4. Да, я могу сделать это с помощью JS, я ищу только чистый css-способ, потому что, если он существует, он намного элегантнее и легче. Если это не так, тогда ладно, я соглашусь с решением JS.

5. на самом деле, есть хороший способ сделать это, но он все еще требует немного JS; используйте css для создания стиля на основе атрибута элемента и используйте JS для установки атрибута: developer.mozilla.org/en-US/docs/Web/CSS/attr()

Ответ №1:

Хорошо, я проверил свой комментарий, и он работает! Ура!

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

Я установил его только для первого пункта, как вы и хотели:

 .container {
  display: flex;
  width: 200px;
}
.item {
  flex: 0 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Making it prettier -- unrelated to the question */
.container {
  background-color: #cde;
  padding: 5px;
}
.item {
  margin: 0;
}
.item:not(:last-of-type) {
  margin-right: 5px;
}
.item:nth-child(1) {
  background-color: #dec;
  min-width: min-content;
}
.item:nth-child(2) {
  background-color: #ced;
}
.item:nth-child(3) {
  background-color: #dce;
}

 <div class="container">
  <p class="item">sm</p>
  <p class="item">paragraph with large content</p>
  <p class="item">another large content</p>
</div>

1. Если мы знаем, какие элементы малы, то это действительно работает, проблема в том, что каждый элемент имеет динамическое содержимое. Так что, если мы добавим min-width: min-content в класс .item , это не сработает :/ но спасибо за предложение!

Метки: Возможно ли автоматически «сгибать-сжимать» только элементы с большим содержанием?