Как сначала уменьшить большие дочерние элементы flex-box?

Я хочу создать элемент управления хлебными крошками для веб-приложения. Текст в каждом дочернем элементе flex-box должен быть обрезан всякий раз, когда места в контейнере недостаточно для отображения всего. Проблема в том, что дети меньшего роста уменьшаются вместе с детьми большего размера и быстро становятся нечитаемыми.

Например. 3 низкорослых ребенка выглядят прекрасно:

Но как только у одного ребенка будет больше текста, все будет сжато:

Как сначала уменьшить большие дочерние элементы flex-box?

Есть ли способ настроить flex box, чтобы он сначала уменьшал более крупных дочерних элементов до того же размера, что и меньшие дочерние элементы?

В идеале пример должен выглядеть так:

Как сначала уменьшить большие дочерние элементы flex-box?

.container {
  display: flex;
  width: 600px;
}

.child {
  font-size: 30px;
  margin: 0 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;  
}

<div class = "container">
  <div class = "child">
    Link A
  </div>
  <div class = "child">
    Link B
  </div>
  <div class = "child">
    Link C this is a really long link with lots of text
  </div>
</div>

другой интересная тема

— 27.02.2019 11:54

html css flexbox

27.02.2019 10:54

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

755

Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

Вы пытались установить ширину для детей?

.container {
  display: flex;
  width: 600px;
}
.child {
  font-size: 30px;
  margin: 0 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;  
  width: 200px;
}

<div class = "container">
  <div class = "child">Link A</div>
  <div class = "child">Link B</div>
  <div class = "child">Link C this is a really long link with lots of text</div>
</div>

27.02.2019 11:00

Вы можете добавить минимальная ширина маленьких детей, который вы хотите отобразить полностью

.container {
  display: flex;
  width: 600px;
}
.child {
  font-size: 30px;
  margin: 0 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  min-width:86px;
}

<div class = "container">
  <div class = "child">Link A</div>
  <div class = "child">Link B</div>
  <div class = "child">Link C this is a really long link with lots of text</div>
</div>

Спасибо! Минимальная ширина зависит от длины неусеченного текста. Есть ли способ получить это динамически?

— 27.02.2019 11:07

27.02.2019 11:00

Я думаю, вы ищете flex-shrink, flex-grow и flex-basis, чтобы узнать больше прочитайте это

.container {
  display: flex;
  width: 300px;/*I changed this just for testing*/
}

.child {
  flex: 1 1 33%;/*Add this line*/
  font-size: 30px;
  margin: 0 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;  
}

<div class = "container">
  <div class = "child">
    Link A
  </div>
  <div class = "child">
    Link B
  </div>
  <div class = "child">
    Link C this is a really long link with lots of text
  </div>
</div>

27.02.2019 11:04

Ответ принят как подходящий

С flexbox я предполагаю, что вариант состоит в том, чтобы сделать гибкие элементы растянутым на равную величину, задав flex: 1 элементу child (но у этого есть недостаток, заключающийся в том, что элементы child не имеют ширины авто) — см. демонстрацию ниже:

.container {
  display: flex;
  width: 600px;
}

.child {
  font-size: 30px;
  margin: 0 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  border: 1px solid blue;
  flex: 1;
}

<div class = "container">
  <div class = "child">
    Link A
  </div>
  <div class = "child">
    Link B
  </div>
  <div class = "child">
    Link C this is a really long link with lots of text
  </div>
</div>

Используя CSS Grid layout, вы можете легко добиться этого:

Используйте display: grid на контейнере.
Добавьте grid-template-columns: repeat(3, auto), чтобы сделать три столбца с автоматической шириной

См. демо ниже:

.container {
  display: grid; /* defines a grid container */
  grid-template-columns: repeat(3, auto); /* all three columns with auto width */
  width: 600px;
}

.child {
  font-size: 30px;
  margin: 0 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  border: 1px solid blue;
}

<div class = "container">
  <div class = "child">
    Link A
  </div>
  <div class = "child">
    Link B
  </div>
  <div class = "child">
    Link C this is a really long link with lots of text
  </div>
</div>

Работает на меня! Спасибо

— 27.02.2019 11:24

27.02.2019 11:14