Flexbox, как скрыть средний элемент, если он слишком длинный

Есть три выровненных элемента с display: flex.

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

Кроме того, это зависит от размера экрана мобильного устройства.

Как я могу это сделать?

import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <h1>LOGO</h1>
      <h2>Start editing to see some magic happen! Long Title</h2>
      <h1>test</h1>
    </div>
  );
}

.App {
  width: 100%;
  height: 60px;
  display: flex;
  align-content: space-between;
  gap: 20px;
}

было бы хорошо, если бы мы могли скрыть средний элемент, если он переходит на другую строку, но если мы не можем, мы также могли бы сделать что-то вроде того, что если ширина среднего элемента больше 80 пикселей, мы скрываем элемент.

CSS не определяет перенос строки. См. stackoverflow.com/questions/53280724/….

isherwood 18.11.2022 18:24
Создайте ползком, похожим на звездные войны, с помощью CSS и Javascript
Создайте ползком, похожим на звездные войны, с помощью CSS и Javascript
Если вы веб-разработчик (или хотите им стать), то вы наверняка гик и вам нравятся "Звездные войны". А как бы вы хотели, чтобы фоном для вашего...
Начала с розового дизайна
Начала с розового дизайна
Pink Design - это система дизайна Appwrite с открытым исходным кодом для создания последовательных и многократно используемых пользовательских...
Анимация SVG-узоров без единой строки CSS
Анимация SVG-узоров без единой строки CSS
Недавно я работал над веб-проектом, который позволил мне поэкспериментировать с шаблонами SVG. С SVG очень приятно работать, как только вы получите...
Неделя 1 - Карточки с временной шкалой
Неделя 1 - Карточки с временной шкалой
Поскольку это была первая неделя, я решил начать с простого. Предполагалось, что у меня будет временная шкала с несколькими карточками, которые можно...
8 репозиториев GitHub, о которых должен знать каждый веб-разработчик
8 репозиториев GitHub, о которых должен знать каждый веб-разработчик
Здесь представлена дополнительная информация о восьми репозиториях GitHub, о которых должен знать каждый веб-разработчик:
Как создать модальное окно с помощью CSS и JS
Как создать модальное окно с помощью CSS и JS
В этой статье мы создадим модальное окно на чистом JavaScript.
1
1
82
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Я не думаю, что вы можете сделать это с помощью чистого CSS. вам нужно сделать это с помощью javascript. проверьте мой пример ниже. это добавит класс hide (который имеет display: none CSS) в средний элемент, когда его ширина меньше 80 пикселей, и удалит hide, когда ширина больше 80. Знайте, что getBoundingClientRect() возвращает значение bottom, top, height, width, left, right, x, y элемента

const middle = document.querySelector(".middle")
if(middle.getBoundingClientRect().width < 80){
  middle.classList.add("hide")
} else {
  middle.classList.remove("hide")
}
.App {
  width: 100%;
  height: 60px;
  display: flex;
  align-content: space-between;
  gap: 20px;
}

.middle{
  width: 80px;
}

.hide{
  display: none;
}
<div class="App">
      <h1>LOGO</h1>
      <h2 class="middle">Start editing to see some magic happen! Long Title</h2>
      <h1>test</h1>
    </div>

и поскольку вы используете React здесь, вы можете использовать useEffect для обработки любого эффекта, такого как window.onresize()

вы можете использовать useRef хук, чтобы сделать это, допустим, вам нужно скрыть длинный текстовый элемент, ширина которого превышает 80 пикселей (предположим, что этот элемент является <h2> элементом.

import "./styles.css";
import {useRef} from "react";
export default function App() {
    const el=useRef();
  return (
    <div className="App">
      <h1>LOGO</h1>
      <h2 style={{display:el.current.getBoundingClientRect().width>80?"none":"block"}}>Start editing to see some magic happen! Long Title</h2>
      <h1>test</h1>
    </div>
  );
}

Хук useRef используется для ссылки на элемент Dom и getBoundingClientRect() возвращает размеры и местоположение элемента в виде чисел с плавающей запятой, а также высоту и ширину элемента. Таким образом, мы получаем доступ к его ширине через el.current.getBoundingClientRect().width

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

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

.App {
  width: 100%;
  height: 60px;
  display: flex;
  flex-wrap: nowrap;
  align-items: top;
  justify-content: center;
  gap: 10px;
  overflow: hidden;
}
.inner {
  align-self: top;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  flex-grow: 1;
  min-width: 0;
}
.inner .hider {
  height: 60px;
  width: 1px;
  flex-grow: 1;
}
.inner h2 {
  overflow: hidden;
}
<div class="App">
<h1>LOGO</h1>
    <div class="inner">
        <div class="hider"></div>
        <h2>Start editing to see some magic happen! Long Title</h2>
        <div class="hider"></div>
    </div>
<h1>test</h1>
</div>

Прямо сейчас при сжатии страницы h2 скрыт, но если я уменьшу страницу еще больше, я также не смогу увидеть LOGO и test. Я всегда хочу показать эти два. Есть ли способ, которым я могу это сделать?

tomo1234 18.11.2022 19:49

Да. Я добавил min-width: 0; to .inner в ответ. Я также уменьшил разрыв в .App до 10 пикселей. Вы можете уменьшить его еще больше и, возможно, вместо этого применить отступы или поля к элементам в .App.

AtomicUs5000 18.11.2022 20:01

Другие вопросы по теме