Qt5 QML中Text控件截断后自定义省略号样式的实现方法

默认的Text.ElideRight生成的省略号是Unicode的“…”字符，若需要替换为自定义样式（如三个英文点“...”），或调整截断逻辑匹配需求，可通过以下两种方式实现：

方法一：直接替换默认省略号 #

利用TextMetrics生成截断文本后，替换默认省略号为自定义样式：

Text {
    Layout.topMargin: 5
    Layout.preferredWidth: parent.width
    Layout.preferredHeight: columnsItem.titleHeight
    font: Style.h4
    wrapMode: Text.Wrap
    maximumLineCount: 2
    lineHeight: 1.5

    // 提取原始文本，方便复用
    property string originalTitle: BodyViewModelCpp.findMusicPageColumns.getSubitemProperty(modelData, "title")

    text: {
        // 创建TextMetrics实例计算文本显示情况
        let tm = Qt.createQmlObject('import QtQuick 2.15; TextMetrics {}', this)
        tm.font = font
        tm.width = width
        tm.wrapMode = Text.Wrap
        tm.maximumLineCount = 2

        // 生成默认截断文本，替换省略号为自定义样式
        let elidedText = tm.elidedText(Qt.TextElideRight, width)
        return elidedText.replace(/…$/, '...') // 将默认“…”替换为“...”
    }
}

方法二：自定义截断逻辑（更灵活） #

若默认截断位置不符合需求，可手动计算两行文本的容纳范围，精准控制截断点和省略号：

Item {
    Layout.topMargin: 5
    Layout.preferredWidth: parent.width
    Layout.preferredHeight: columnsItem.titleHeight

    // 原始文本
    property string originalTitle: BodyViewModelCpp.findMusicPageColumns.getSubitemProperty(modelData, "title")

    // 计算文本显示状态的TextMetrics
    TextMetrics {
        id: titleMetrics
        font: Style.h4
        width: parent.width
        wrapMode: Text.Wrap
        maximumLineCount: 2
        text: originalTitle
    }

    // 显示完整文本（未超出时）
    Text {
        id: fullTitle
        anchors.fill: parent
        font: Style.h4
        wrapMode: Text.Wrap
        maximumLineCount: 2
        lineHeight: 1.5
        text: originalTitle
        visible: !titleMetrics.elided
    }

    // 显示带自定义省略号的截断文本（超出时）
    Text {
        id: truncatedTitle
        anchors.fill: parent
        font: Style.h4
        wrapMode: Text.Wrap
        maximumLineCount: 2
        lineHeight: 1.5
        visible: titleMetrics.elided
        text: {
            let tm = Qt.createQmlObject('import QtQuick 2.15; TextMetrics {}', this)
            tm.font = font
            tm.width = width
            tm.wrapMode = Text.Wrap

            // 获取第一行完整文本
            let firstLineEnd = tm.lineAt(0).length
            let firstLine = originalTitle.substring(0, firstLineEnd)

            // 计算第二行可容纳的文本，去掉默认省略号后添加自定义样式
            tm.text = originalTitle.substring(firstLineEnd)
            let secondLine = tm.elidedText(Qt.TextElideRight, width).replace(/…$/, '')

            return `${firstLine}\n${secondLine}...`
        }
    }
}

补充说明 #

如果需要特殊样式的省略号（如不同字体、颜色），可将省略号单独用Text控件叠加在文本末尾，通过anchors定位到第二行右侧即可。注意确保TextMetrics的font、width、wrapMode属性与显示文本的Text控件完全一致，避免计算偏差。

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