微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

如何解决有没有办法隐藏不适合其父div的div?

我正在使用可调整大小的网格(gridstackjs),当文本溢出单元格时,我想在其中隐藏文本。我用一个包含单元格DIV中文本的DIV完成了此操作。

我已经尝试使用CSS和媒体查询,但是找不到正确的方法。有一张图片

enter image description here

谢谢你,希望我自己解释一下。

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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。