CSS. flex. При наведении чтобы раздвигался один элемент ленты с отображением всего текста

Question

CSS. flex. При наведении чтобы раздвигался один элемент ленты с отображением всего текста

Рейтинг: 0Ответов: 1Опубликовано: 24.07.2023

Есть элемент (line-container), который вмещает много дочерних (line-name). При нормальном отображении текст в дочерних элементах сокращается, чтобы все элементы были одинакового размера. Нужно добавить, чтобы при наведении мышки на один из дочерних элементов (line-name) он раздвигался таким образом, чтобы весь его текст уместился в элементе (отобразился), а остальные при этом сузились.

.line-container {
  position: relative;
  display: flex;
  align-content: flex-start;
  justify-content: space-between;
  width: 100%;
}
.line-name {
  display: flex;
  font-weight: bold;
  font-size: 0.7em;
  overflow-x: hidden !important;
  flex: 1 1 0px;
  text-overflow: clip;
  line-height: 30px;
  width: 0;
  white-space: nowrap;
  margin: 0 0 0 5px;
  padding: 0 0 0 10px;
  cursor: pointer;
  width: 0;
}

css flexbox

Источник: Stack Overflow на русском

Answer 1

▲ 0

Нашел почти решение:

такие функции использую:

    expandElement(board, voronka, index) {
      board.voronki.forEach((el) => {
        el.expanded = false;
      });
      voronka.expanded = true;
      this.$nextTick(() => {
        const width = this.$refs.voronki[index].scrollWidth;
        voronka.expanded = width > 0;
      });
    },
    resetElement(voronka) {
      voronka.expanded = false;
    },

и такие стили:

.line-name.expanded {
  font-size: 0.9em;
  flex: 7;
  z-index: 2;
}
.line-name:not(.expanded) {
  flex: 1;
}

Т.о. нужный элемент сильно расширяется, а остальные - сужаются. "Почти решение" - потому что ширина элемента получается фиксированной и не соответствует ширине текста, которую он содержит. Поэтому решение временное и не идеальное. Кстати, помог ChatGPT - спасибо ему (не с первого разу, но все же). Да, и функции эти вызываю таким образом:

        <div @mouseover="expandElement(board, voronka, index)"
            @mouseleave="resetElement(voronka)"

CSS. flex. При наведении чтобы раздвигался один элемент ленты с отображением всего текста

Ответы