SVG中text-overflow:ellipsis属性失效问题咨询

这确实是浏览器对SVG2 text-overflow 属性支持不完善的已知问题，并非代码本身错误。

核心问题解析 #

虽然SVG2规范明确规定了text-overflow（包括ellipsis和clip值）可配合inline-size、overflow:hidden实现文本截断，但目前主流浏览器对这一SVG2特性的支持度极低：

1. 官方示例代码本身存在疏漏：要触发text-overflow效果，必须同时设置overflow:hidden，但示例中后两个<text>元素未添加该属性；
2. 即便补上overflow:hidden，多数浏览器（如Chrome、Firefox）依然未实现SVG文本的ellipsis截断逻辑，仅部分浏览器对clip值有有限支持。

可行替代方案 #

因为原生SVG的text-overflow:ellipsis支持不足，推荐以下两种替代方法：

方法1：用<foreignObject>嵌入HTML文本

利用HTML成熟的CSS文本截断支持，通过<foreignObject>在SVG中嵌入HTML元素：

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="150" viewBox="0 0 300 150">
  <style>
    .truncated-text {
      width: 100px;
      font: 25px sans-serif;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin: 0;
    }
    path { fill: none; stroke: #add8e6; }
  </style>
  <path d="m  50,0 0,150"/>
  <path d="m 200,0 0,150"/>
  
  <!-- 原生SVG无效果的对比 -->
  <text x="50" y="35" inline-size="100" style="overflow:visible">SVG is awesome</text>
  <text x="50" y="85" inline-size="100" style="overflow:hidden; text-overflow:clip">SVG is awesome</text>
  
  <!-- 用HTML实现的ellipsis截断 -->
  <foreignObject x="50" y="110" width="100" height="40">
    <div xmlns="http://www.w3.org/1999/xhtml" class="truncated-text">
      SVG is awesome
    </div>
  </foreignObject>
</svg>

方法2：JavaScript手动计算截断

纯SVG场景下，可通过JS获取文本的实际宽度，判断是否溢出后手动截断并添加省略号：

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="150" viewBox="0 0 300 150">
  <style>
    text { font: 25px sans-serif; }
    path { fill: none; stroke: #add8e6; }
  </style>
  <path d="m  50,0 0,150"/>
  <path d="m 200,0 0,150"/>
  
  <text id="truncated-text" x="50" y="135">SVG is awesome</text>
  
  <script type="text/javascript">
    const textEl = document.getElementById('truncated-text');
    const maxWidth = 100;
    let text = textEl.textContent;
    
    // 循环截断文本直到宽度符合要求
    while (textEl.getBBox().width > maxWidth && text.length > 0) {
      text = text.slice(0, -1);
      textEl.textContent = text + '...';
    }
  </script>
</svg>

关于问题时效性 #

这个兼容性问题确实存在超过5年，截至2024年，主流浏览器仍未完全实现SVG2的text-overflow特性，相关的浏览器bug报告仍处于开放状态，并未过时。

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