如何防止文本向下溢出div 实现文本向上排布且不裁切内容

场景1：需保留div固定高度 #

你可以任选以下三种方案实现，文本会从容器底部开始向上排布，内容超出时向容器顶部延伸，不会向下溢出也不会裁切文本：

• Flex布局方案

/* 给目标div添加如下样式，原有宽高、边框等属性保留即可 */
.target-div {
  display: flex;
  align-items: flex-end;
}

• 绝对定位方案

.target-div {
  position: relative;
  /* 保留原有固定高度等属性 */
}
/* 给内部文本包裹标签添加如下样式 */
.target-div .text-inner {
  position: absolute;
  bottom: 0;
  margin: 0;
}

• Grid布局方案

.target-div {
  display: grid;
  align-content: end;
  /* 保留原有固定高度等属性 */
}

场景2：不需要强制固定div高度 #

直接删除div的固定height属性即可，div会自动跟随文本内容高度自适应撑开，完全不会出现内容溢出问题。

内容的提问来源于stack exchange，提问作者DiracSpace