如何根据文本尺寸自动调整布局大小以实现目标显示效果

以下是不同开发场景下的可落地实现方案，可根据你的技术栈直接选用：

Web前端（CSS）实现 #

• 不要给容器写死固定width/height属性，依赖元素默认的内容自动撑开特性即可，可设置max-width避免文本行过长影响阅读

.text-box {
  max-width: 650px;
  padding: 10px 15px;
  /* 长文本自动换行，避免溢出 */
  word-break: break-all;
  word-wrap: break-word;
}

• 如果父容器是Flex/Grid布局，需要关闭子元素的自动拉伸配置：

/* Flex布局父容器 */
.flex-wrapper {
  display: flex;
  align-items: flex-start;
}
/* 文本容器 */
.text-box {
  flex: none; /* 禁止flex自动拉伸 */
}

Android原生实现 #

给TextView直接设置wrap_content作为宽高属性即可：

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:maxWidth="360dp"
    android:paddingVertical="10dp"
    android:paddingHorizontal="12dp"
    android:text="长文本内容"/>

iOS原生实现 #

UILabel关闭行数限制，调用sizeToFit()自动适配，或自动布局只设置边距约束不写死宽高：

let contentLabel = UILabel()
contentLabel.numberOfLines = 0
contentLabel.text = "长文本内容"
contentLabel.sizeToFit()

参考效果 #

你期望实现的效果：

对照的错误效果：

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