Flexbox How To Hide A Middle Element If It's Too Long

Contents hide

1 Flexbox how to hide a middle element if it's too long

Problem Description:

There are three aligned elements with display: flex.

I’d like to hide a middle element if it’s too long (if the text goes to another line) and the middle element is dynamic so sometimes it’s short, sometimes it’s long.

Also, this is specific for the mobile screen size.

How can I do that?

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;
}

it would be nice if we can hide the middle element if it goes to another line but if we can’t, we also could do something like if the middle element’s width is larger than 80px, we hide the element.

Solution – 1

I don’t think you can do this with pure CSS. you need to do it by javascript. check my below example. this will add the hide class (which has a display: none CSS) in the middle element when its width is less than 80px and remove hide when it’s more than 80. know that getBoundingClientRect() returns an element’s bottom, top, height, width, left, right, x, y value

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>

and as you’re using React here, you might wanna use useEffect to handle any effect like window.onresize()

Solution – 2

you can use useRef hook to do that, let say you need to hide the long text element that width is greater than 80px,(assume that element is <h2> element.

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 hook is used to refer the Dom element and getBoundingClientRect() return dimensions and location of the element as floating-point numbers and height and width of the element.so we are accessing it’s width via el.current.getBoundingClientRect().width

Solution – 3

You can hide the overflow, then contain the title in another flex with placeholder divs on the sides. When the text is too long, it moves to the next row which cannot be seen.

.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>

Rate this post