Есть ли способ скрыть div, который не помещается внутри его родительского div?

#javascript #html #css #styles #hide

#javascript #HTML #css #стили #скрыть

Вопрос:

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

Я пробовал использовать css и медиа-запросы, но не могу найти правильный способ. Есть изображение:

Спасибо, надеюсь, я объяснил сам.

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

Ответ №1:

Свойство ‘overflow: hidden’ будет скрывать только переполненное содержимое. Чтобы скрыть элемент при изменении размера страницы, вам нужно использовать свойство ‘display: none’ вместе с медиа-запросами.

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

Это скроет ваш текстовый элемент, когда ширина экрана меньше 300 пикселей. Я думаю, это поможет вам.

Ответ №2:

Используйте медиа-запрос для соответствующего размера устройства со свойством display: none .

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

Ответ №3:

Добавьте следующий стиль CSS к тегу, который не работает

 overflow: hidden