Flutter中如何自定义Text ellipsis文本溢出省略样式

默认CSS属性text-overflow: ellipsis仅支持渲染三个点的默认省略样式，无法直接修改省略标识，可通过以下几种可行方案实现自定义效果：

方案1：纯CSS定位实现（兼容性最优） #

适合绝大多数展示场景，支持单行/多行文本截断，无需JS介入：

• 给文本容器设置固定宽高、溢出隐藏，预留出省略标识的展示位置
• 通过::after伪元素插入自定义的省略内容，绝对定位到容器右下角，设置和容器一致的背景色遮挡末尾露出的半截文字即可

示例代码：

.text-wrap {
  position: relative;
  width: 320px;
  line-height: 1.6;
  /* 要显示3行就设为 line-height * 3 的值，单行就设为line-height的高度 */
  max-height: 4.8em;
  overflow: hidden;
  /* 给省略标识留出右侧空间，避免压住正文 */
  padding-right: 42px;
}
.text-wrap::after {
  /* 此处可替换为任意你需要的省略标识，比如»、[更多]、▼等 */
  content: "... 查看更多";
  position: absolute;
  right: 0;
  bottom: 0;
  /* 背景色必须和文本容器背景色保持一致，用来遮挡末尾截断的文字 */
  background: #ffffff;
  padding-left: 6px;
}

注意：设置max-height时必须保证值是行高的整数倍，避免容器底部露出半截文字。

方案2：webkit内核专属截断方案（适配移动端/现代浏览器） #

如果不需要兼容低版本IE，可使用webkit内核原生多行截断属性配合伪元素实现，截断精度比纯高度控制更高，不会出现半行文字问题：

.text-wrap {
  width: 320px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3; /* 控制显示行数 */
  -webkit-box-orient: vertical;
  position: relative;
  padding-right: 24px;
}
.text-wrap::after {
  content: " »";
  position: absolute;
  right: 0;
  bottom: 4px;
  background: #ffffff;
}

方案3：JS动态截断（精度最高） #

如果需要严格将省略标识拼接在最后一个可见字符末尾，不需要背景遮罩，可通过JS动态计算截断位置：

• 按字符数截断实现简单，适合定宽容器场景
• 按容器宽度截断可配合Canvas的measureTextAPI计算当前宽度下可容纳的字符数，适配响应式布局

示例代码（按字符数截断）：

/**
 * 给目标元素设置自定义省略标识
 * @param {string} selector 目标元素选择器
 * @param {number} maxChar 最多显示的字符数
 * @param {string} ellipsis 自定义省略标识
 */
function setCustomEllipsis(selector, maxChar = 60, ellipsis = "...[更多]") {
  document.querySelectorAll(selector).forEach(el => {
    const originText = el.textContent.trim();
    if (originText.length > maxChar) {
      el.textContent = originText.slice(0, maxChar) + ellipsis;
    }
  });
}

// 调用示例：给所有类名为text-wrap的元素设置自定义省略
setCustomEllipsis('.text-wrap', 60, '... 查看全文')

如果是响应式场景，监听容器尺寸变化事件重新执行截断逻辑即可。

方案选型建议 #

• 普通PC/移动端展示场景优先选纯CSS方案，性能最好、实现成本最低
• 对截断精度要求高、省略标识需要绑定交互（比如点击展开全文）的场景选JS方案

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