Jetpack Compose文本换行留冗余空白，如何缩减整体宽度？

以下是针对性的解决方法，可根据你的实际代码场景选择：

1. 让Box宽度自适应内容 #

如果你的Box当前是占满父布局宽度，或是未设置宽度自适应，给Box添加wrapContentWidth()修饰符，让它的宽度跟随内部Text的实际内容宽度，避免强制拉宽导致空白：

@Composable
fun FixedBox() {
    Box(
        modifier = Modifier
            .wrapContentWidth() // 核心：Box宽度适配内容
            .maxWidth(200.dp) // 保留最大宽度限制，防止内容过长撑爆布局
            .maxHeight(100.dp)
            .border(1.dp, Color.Gray, RoundedCornerShape(8.dp))
            .padding(16.dp)
    ) {
        Text(
            text = "Jetpack Compose UI Development",
            maxLines = 2,
            overflow = TextOverflow.Ellipsis,
            style = TextStyle(fontSize = 16.sp)
        )
    }
}

2. 调整Text的对齐方式 #

如果你的Text设置了textAlign = TextAlign.Center或其他非左对齐方式，会导致第一行文字两侧出现空白，改回默认的左对齐即可：

Text(
    text = "Jetpack Compose UI Development",
    maxLines = 2,
    overflow = TextOverflow.Ellipsis,
    textAlign = TextAlign.Start, // 显式设置左对齐，默认值，但如果之前修改过需调整
    style = TextStyle(fontSize = 16.sp)
)

3. 用固有尺寸约束精准控制宽度 #

如果需要更精准的尺寸控制，给Box添加intrinsicSize(IntrinsicSize.Min)，让它基于Text的固有最小宽度计算自身宽度，同时让Text占满Box宽度，既保证换行逻辑正常，又不会出现多余空白：

@Composable
fun IntrinsicSizeBox() {
    Box(
        modifier = Modifier
            .intrinsicSize(IntrinsicSize.Min)
            .maxWidth(200.dp)
            .maxHeight(100.dp)
            .border(1.dp, Color.Gray, RoundedCornerShape(8.dp))
            .padding(16.dp)
    ) {
        Text(
            text = "Jetpack Compose UI Development",
            maxLines = 2,
            overflow = TextOverflow.Ellipsis,
            modifier = Modifier.fillMaxWidth(), // Text占满Box宽度，此时Box宽度为内容最小宽度
            style = TextStyle(fontSize = 16.sp)
        )
    }
}

关键原理 #

问题本质是Box的宽度被强制设置为大于Text实际需要的宽度，导致Text填充整个Box宽度时，换行后的第一行剩余空间出现空白。通过让Box宽度适配内容，就能让整体宽度缩减到Text实际占用的最小宽度，消除多余空白。

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