Is there a way to hide a div that doesn't fit inside his parent div?

Question

I'm working with a resizable grid (gridstackjs) and I want to hide the text inside when it overflows the cell. I've done it with a DIV containing the text inside the cell DIV.

I've tried with css and media queries but can't find the correct way. There is a image:

Thank you, hope I explained myself.

 .elemento { overflow: hidden; }.texto-elementos { text-align: center; font-weight: bold; color: white; text-shadow: 2px 2px #474747; overflow: hidden; }.iconoAlturas { margin-top: -22px; margin-right: 8px; float: right; }

 <div class="grid-stack-item-content elemento ui-draggable-handle"> <div class="mt-2 texto-elementos">U1001</div><div class="iconoAlturas"><i class="fas fa-layer-group"></i></div></div>

Answer 1

The property 'overflow: hidden' will only hide the overflowed content. To hide the element on page resize you need to use the 'display: none' property along with media queries.

 @media only screen and (max-width:300px){
      .texto-elementos {
         display:none
      }
}

This will hide your text element when the screen width is less than 300px. I think it will help you.

Answer 2

Add the following CSS style on the tag that isn't working

overflow: hidden

Answer 3

Use media query for respective device size with display: none property.

 @media only screen and (respective screen size){.[class] { display:none } }