Jetpack Compose多行文本如何替换默认省略号为自定义后缀？

Jetpack Compose 默认的 Text 组件并不支持直接替换多行文本的溢出省略号，但可以通过结合 BasicText 和文本布局计算来实现自定义后缀的需求。核心思路是先判断文本是否溢出，再通过布局信息计算出最后一行能容纳的原文本长度，最后拼接自定义后缀并渲染。

实现代码 #

@Composable
fun CustomEllipsisText(
    text: String,
    customEllipsis: String = "... etc.",
    modifier: Modifier = Modifier,
    style: TextStyle = LocalTextStyle.current,
    maxLines: Int = Int.MAX_VALUE
) {
    var processedText by remember { mutableStateOf(text) }
    var isOverflowed by remember { mutableStateOf(false) }

    BasicText(
        text = text,
        style = style,
        maxLines = maxLines,
        onTextLayout = { layoutResult ->
            isOverflowed = layoutResult.hasVisualOverflow
            if (isOverflowed) {
                // 定位到最后一行（受maxLines限制）
                val targetLine = minOf(maxLines - 1, layoutResult.lineCount - 1)
                val lineTotalWidth = layoutResult.size.width.toFloat()
                
                // 计算自定义后缀的宽度
                val ellipsisWidth = layoutResult.multiParagraph
                    .measureText(customEllipsis, 0, customEllipsis.length)
                
                // 计算最后一行可用于原文本的宽度
                val availableTextWidth = lineTotalWidth - ellipsisWidth
                
                // 找到最后一行能容纳的最大原文本索引
                var endIndex = layoutResult.getLineEnd(targetLine, visibleEnd = true)
                while (endIndex > 0) {
                    val currentWidth = layoutResult.multiParagraph
                        .measureText(text, 0, endIndex)
                    if (currentWidth <= availableTextWidth) break
                    endIndex--
                }
                
                // 拼接处理后的文本（去除末尾空白避免排版问题）
                processedText = text.substring(0, endIndex).trimEnd() + customEllipsis
            } else {
                processedText = text
            }
        },
        modifier = modifier.drawWithContent {
            // 仅在溢出时渲染处理后的文本，否则直接渲染原文本
            if (isOverflowed) drawContent()
            else {
                BasicText(
                    text = processedText,
                    style = style,
                    maxLines = maxLines,
                    modifier = Modifier.matchParentSize()
                )
            }
        }
    )
}

使用示例 #

CustomEllipsisText(
    text = "Long-long-long text to be ellipsized",
    customEllipsis = "... etc.",
    style = TextStyle(fontSize = 16.sp),
    maxLines = 2,
    modifier = Modifier.width(200.dp)
)

方案说明 #

1. 布局判断：通过 onTextLayout 回调获取文本的布局结果，判断是否存在视觉溢出。
2. 宽度计算：计算自定义后缀的宽度，以及最后一行可容纳原文本的剩余宽度。
3. 文本截取：逐步缩减原文本最后一行的字符数，直到其宽度适配剩余空间，再拼接自定义后缀。
4. 渲染控制：通过 drawWithContent 避免重复布局，仅在溢出时渲染处理后的文本。

这个方案能确保自定义后缀精准贴合在多行文本的末尾，完全适配多行排版场景，同时保留原文本的样式一致性。

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