有没有办法隐藏不适合其父div的div？

问题描述

我正在使用可调整大小的网格（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>

解决方法

属性“溢出：隐藏”将仅隐藏溢出的内容。要隐藏页面调整大小时的元素，您需要使用“ display：none”属性以及媒体查询。

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

当屏幕宽度小于300px时，这将隐藏您的文本元素。我认为这会对您有所帮助。

,

在无效的代码上添加以下CSS样式

overflow: hidden

,

使用带显示：none属性的媒体查询来查询各个设备的大小。

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