我有一个内部有文字的响应广场。我希望广场能够保持所有尺寸的比例,除非里面的文字溢出,而不是我希望广场更高。 现在,文本只是隐藏了。
http://jsfiddle.net/38Tnx/2253/
<div class='square-box'>
<div class='square-content'>
<div>
<span>text</span>
</div>
</div>
</div>
.square-box{
position: relative;
width: 50%;
overflow: hidden;
background: #4679BD;
}
.square-box:before{
content: "";
display: block;
padding-top: 100%;
}
.square-content{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
color: white;
}
.square-content div {
display: table;
width: 100%;
height: 100%;
}
.square-content span {
display: table-cell;
text-align: center;
vertical-align: middle;
color: white
}
答案 0 :(得分:0)
使用以下代码替换 .square-box
css
.square-box{
position: relative;
width: 50vw;
height: 50vw;
overflow: hidden;
background: #4679BD;
}
答案 1 :(得分:0)
试试这个。希望它有所帮助。
.square-box{
position: relative;
width: 50%;
/*overflow: hidden;*/
/*background: #4679BD;*/
}
.square-box:before{
content: "";
display: block;
padding-top: 100%;
}
.square-content{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
color: white;
}
.square-content div {
display: table;
width: 100%;
height: 100%;
background:#4679BD; /* moved */
}
.square-content span {
display: table-cell;
text-align: center;
vertical-align: middle;
color: white
}