PAYATHON 2026

SVG 的 text-overflow: ellipsis 为何不生效？

数据阿明

结论

示例本身与规范说明存在矛盾。它给所有 <text> 设置了 white-space: pre，而 SVG 2 的 text-overflow 说明指出，该属性不适用于预格式化文本。紧接着的示例却在这种设置下演示了 text-overflow: ellipsis。如果浏览器遵循前述规则，就不会显示省略号。

调整方式

将 white-space: pre 改为 white-space: nowrap，保留 inline-size 作为文本区域宽度，并设置 text-overflow: ellipsis：

<svg xmlns="http://www.w3.org/2000/svg"
     width="300" height="150" viewBox="0 0 300 150">
  <text x="50" y="50"
        inline-size="100"
        style="font: 25px sans-serif; white-space: nowrap; text-overflow: ellipsis;">
    SVG is awesome
  </text>
</svg>

inline-size="100" 定义 SVG 文本的换行区域宽度；nowrap 让文本保持单行，并产生行内溢出；ellipsis 则指定溢出时显示省略号。若仍无效果，可以在目标浏览器中检查 SVG 2 文本布局和 text-overflow 的实际支持情况。需要更可控的兼容性时，可以在 JavaScript 中测量文本宽度并截短字符串，或改用 HTML 文本布局。

SVG 的省略号只是一种视觉效果，不会写入文本对应的 DOM 内容。复制文本或通过 DOM 读取时，通常仍会得到原始字符串。

参考：SVG 2 的 text-overflow 说明及示例、MDN：SVG text-overflow

备注：内容仅供参考。