子元素如何在父元素达到最大高度时自动增加宽度

Niau
  • 19
<div class="div">
    <p>啊啊啊啊啊啊啊...</p>
</div>

.div{
    width:40px;
    height:40px;
}
.div p{
    border: 1px solid #D5BC88;
    line-height: 20px;
    font-size: 14px;
    color: #D5BC88;
    padding: 10px 10px;
    min-width: 200px;
    width: auto;    
    max-height: 110px;
    word-wrap: break-word;
    word-break: normal;
    background: #5D5D58;
}

如上片段,父元素宽高固定,子元素的文本内容不固定,可多可少,此时子元素最高高度限定110,宽度最小200,但是情况是子元素文本内容填充后将高度撑到110后多余的部分会直接溢出而不会撑开宽度

该怎么可以处理这个问题

回复
阅读 397
2 个回答

原答案:子元素加position: absolute;父元素不要加

编辑后:子元素加position: absolute;父元素不要加;但父元素的父元素需要(前提是父元素有上级元素且不是body)加上position: relative;避免子元素的absolute位置太过偏离

父元素div设置min-height;子元素p不要设置height,这样就可以内容不足时显示最小高度,内容多就会撑开了

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏