如何在含文本的SVG中设置inline-size？为何文本换行失效？

核心结论 #

目前主流浏览器的SVG text元素暂不支持通过inline-size属性实现自动文本换行——哪怕inline-size是标准CSS属性，它在SVG环境下的支持范围和HTML存在显著差异。

关键依据 #

• SVG 2规范中关于text元素自动换行的定义，本质是依赖CSS盒模型对文本块的处理，但当前主流浏览器（Chrome、Firefox、Safari等）均未在SVG text元素上完成这部分特性的实现。规范描述仅为设计目标，尚未转化为普遍可用的浏览器功能。
• 虽然MDN提到SVG样式系统与HTML CSS兼容，但这是整体层面的表述，具体到单个CSS属性在SVG特定元素上的支持，存在大量例外情况。inline-size在SVG text元素上的支持就属于这类未实现的例外，浏览器兼容性数据显示该场景下无有效支持记录。
• SVG传统的text元素设计基于行内文本流，默认不具备块级文本的换行能力，即使添加inline-size，浏览器也不会按照块级元素逻辑处理文本换行。

替代实现方案 #

如果需要在SVG中实现文本自动换行，可采用以下几种可靠方式：

• 使用<foreignObject>嵌入HTML元素，利用HTML原生换行逻辑：

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="100" viewBox="0 0 300 100">
  <foreignObject x="50" y="10" width="200" height="80">
    <body xmlns="http://www.w3.org/1999/xhtml">
      <p style="font:20px sans-serif; margin:0;">This text wraps at 200 pixels.</p>
    </body>
  </foreignObject>
</svg>

• 手动拆分文本为多个<tspan>元素，通过设置dy实现换行：

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="100" viewBox="0 0 300 100">
  <text x="50" y="30" style="font:20px sans-serif;">
    <tspan>This text wraps at</tspan>
    <tspan x="50" dy="25">200 pixels.</tspan>
  </text>
</svg>

• 部分浏览器支持SVG 2的<textArea>元素（兼容性有限，需测试）：

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="100" viewBox="0 0 300 100">
  <textArea x="50" y="30" width="200" style="font:20px sans-serif;">
    This text wraps at 200 pixels.
  </textArea>
</svg>

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