我有一个HTML结构如下:
<div class="act">
<div>/*left button*/</div>
<div>
<p>My very long text goes here</p>
</div>
<div>/*right button*/</div>
</div>
My outer div have a min-height
but I don't set its height
so that it fits whatever inside it. It looks just fine when that <p>
has short text, but if I put a long text inside the <p>
, the text overflows outside the outer <p>
.
这是我的CSS(SASS)文件
@mixin flexCenter($direction) {
display: flex;
justify-content: center;
align-items: center;
flex-direction: $direction;
}
.act {
@include flexCenter(row);
width: 100%;
min-height: 2rem;
border-radius: 2px;
margin-top: 1rem;
justify-content: space-between;
box-shadow: 0px 3px 4px -1px rgba(0,0,0,0.48);
padding: .5rem;
cursor: pointer;
div {
height: 100%;
width: 1.35rem;
height: 2.35rem;
border-radius: 2px;
@include flexCenter(row);
&:nth-child(2) {
background: inherit;
width: 100%;
text-align: center;
p {
font-size: .9rem;
}
}
}
}
我想不通,也许有人可以帮助我吗?谢谢