CSS макет крошки

Question

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

1. Если места достаточно для всех кнопок / текста, тогда покажите все кнопки с минимальной шириной, необходимой для этого (например, кнопки настолько тонкие, насколько это возможно).
2. Когда больше не останется места для всех кнопок / текста, начинайте сворачивать только кнопки. Предпочтительно, чтобы это свертывание происходило пропорционально размеру каждой кнопки.
3. После того, как все кнопки будут свернуты до некоторой минимальной ширины, начните сворачивать окончательный диапазон.

У меня есть полный контроль как DOM, так и CSS. Вот скриншоты того, что я ожидаю увидеть в каждом случае (не обращая внимания на вертикальное выравнивание и изменение полей полей):

Кто-нибудь знает, как выполнить sh вышеуказанный макет в HTML 5? Обратите внимание, что мне нужно только поддерживать современные браузеры (поддержка IE / Edge не требуется).

Answer 1

Идея состоит в том, чтобы установить flex-shrink; на 0 на промежутке.

div {
  display: flex;
  resize: both;
  overflow: hidden;
  padding:10px;
  border:1px solid;
}

button {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  min-width: 30px;
}

span {
  min-width: 50px;
  flex-shrink: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Bottom right corner to resize.
<div>
  <button>Button</button>
  <button>Long Button</button>
  <button>Even longer Button</button>
  <span>Post-Btn Text</span>
</div>

---

Поскольку промежуток также должен уменьшаться, в конечном итоге ему также необходимо как минимум flex-shrink:1;.

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

div {
  display: flex;
  resize: both;
  overflow: hidden;
  padding:10px;
  border:1px solid;
}

button {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  min-width: 30px;
  
  flex-shrink:999999999999;
}

span {
  min-width: 50px;
  flex-shrink: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  
  flex-shrink:1;
}

Bottom right corner to resize.
<div>
  <button>Button</button>
  <button>Long Button</button>
  <button>Even longer Button</button>
  <span>Post-Btn Text</span>
</div>

Я мог бы вернуться к этому, чтобы увидеть, есть ли лучший способ.

Answer 2

Попробуйте изменить размер окна. Надеюсь, это поможет.

.container {
  display: flex;
  border: 2px red solid;
}

.container button,
.container span {
  font-size: 1rem;
  min-width: 30px;
  margin-right: 1rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: relative;
}

<div class="container">
  <button>Button</button>
  <button>Long Button</button>
  <button>Longer Batton</button>
  <span>Some Text</span>
</div>

Answer 3

div {
  border: 1px solid #F00;
  display: flex;
  overflow: hidden;
  resize: horizontal;
  white-space: nowrap;
}

div > * {
  min-width: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
}

span {
  flex-shrink: 1;
}

button {
  flex-shrink: 50000000;
}

<div>
  <button>Button</button>
  <button>Long Button</button>
  <span>Post-Btn Text</span>
</div>