html – 隐藏显示表和溢出

发布时间:2020-09-21 整理:编程之家
编程之家收集整理的这篇文章主要介绍了html – 隐藏显示表和溢出编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随编程之家小编过来看看吧!
我正在制作Img悬停的乐趣.但是现在我的div中有一些文字.我用过代码:

display: table-cell;
vertical-align: middle;

让文本以我的div为中心.我也有这个代码:

.vertical-smallborder{
    position: relative;
    width: 217px;
    height: 350px;
    border: 5px solid white;
    outline: 1px solid #c8c8c8;
    float:left;
    display: table;

    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;

    overflow: hidden;
}

我得到了显示:那边的文字表.如果我删除它,文本将不会在div中居中.

现在我遇到溢出问题:隐藏.在FireFox和IE溢出:隐藏不再工作,如果有display:table.

谷歌浏览器和Safari都支持显示:表格和溢出:隐藏在一起.

注意:它必须是纯CSS.所以我不能使用任何JavaScript.

谢谢

解决方法

对于Firefox – 概念验证

我创建了一个演示如下:

<div class="image-clipper">
    <img src="http://placekitten.com/400/500" style="margin: -150px 0 0 -100px;" />
    <div class="text-panel">
        <div class="text-cell">
        <h1>Overhemd<br/>24,95</h1>
        <p>Lorem ipsum dolor sit amet,consectetur adipiscing elit.</p>
        </div>
    </div>
</div>

并使用以下CSS:

.image-clipper {
    width: 250px;
    height: 300px;
    border: 5px solid red;
    overflow: hidden;
    position: relative;
}
.image-clipper .text-panel {
    position: absolute;
    top: 0;
    left: 0;
    display: table;
    height: 100%;
}
.image-clipper .text-cell {
    display: table-cell;
    vertical-align: middle;
    padding: 20px; /* works okay */
    background-color: rgba(255,255,0.5); /* applied to entire cell */
}

我能够在父元素中剪切图像,并根据需要定位表/表格单元格.

见demo:http://jsfiddle.net/audetwebdesign/JpMXP/

后记

我没有时间深入审查您的样式表或调查表/表格单元格如何与overflow:hidden进行交互的完整细节.但是,这种方法似乎有效并且相对容易理解.

总结

以上是编程之家为你收集整理的html – 隐藏显示表和溢出全部内容,希望文章能够帮你解决html – 隐藏显示表和溢出所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您喜欢交流学习经验,点击链接加入编程之家官方QQ群:1065694478
编程之家官方公众号

微信公众号搜索 “ 程序精选 ” ,选择关注!

微信公众号搜索 “ 程序精选 ”
精选程序员所需精品干货内容!