文本长度

textLength 属性，适用于 SVG 的 <text> 和 <tspan> 元素，可让您指定文本绘制所占用的空间宽度。用户代理将确保文本不会超出该距离，并使用 lengthAdjust 属性指定的方法来执行此操作。默认情况下，仅调整字符之间的间距，但如果您更改 lengthAdjust，还可以调整字形大小。

通过使用 textLength，您可以确保您的 SVG 文本以相同的宽度显示，无论网络字体加载失败（或尚未加载）等情况如何。

你可以将此属性与以下 SVG 元素一起使用

示例

html,
body,
svg {
  height: 100%;
}

html

<svg viewBox="0 0 200 60" xmlns="http://www.w3.org/2000/svg">
  <text y="20" textLength="6em">Small text length</text>
  <text y="40" textLength="120%">Big text length</text>
</svg>

用法说明

值	`<length-percentage>` \| `<number>`
默认值	None
可动画的	是

<length-percentage>: 此值指定文本将调整为占据的空间宽度，可以是绝对长度或百分比。
<number>: 数值指定了相对于当前坐标系单位的长度。

交互式示例

本示例展示了可以通过一个类型为 "range" 的 <input> 元素来调整大小的文本。

CSS

css

.controls {
  font:
    16px "Open Sans",
    "Arial",
    sans-serif;
}

SVG

让我们从 SVG 开始。它非常基础，在一个 1000x300 像素的空间中映射到一个 10 厘米 x 3 厘米的框。

html

<svg
  width="10cm"
  height="3cm"
  viewBox="0 0 1000 300"
  xmlns="http://www.w3.org/2000/svg">
  <rect
    x="1"
    y="1"
    width="998"
    height="298"
    fill="none"
    stroke="green"
    stroke-width="2" />

  <text
    id="hello"
    x="10"
    y="150"
    font-family="sans-serif"
    font-size="60"
    fill="green">
    Hello world!
  </text>
</svg>

首先，使用 <rect> 元素创建并描边一个矩形来容纳文本。然后使用 <text> 创建文本元素本身，其 id 为 "hello"。

HTML

HTML 包含两个显示元素，它们都包含在一个分组的 <div> 中。

html

<div class="controls">
  <input type="range" id="widthSlider" min="80" max="978" />
  <span id="widthDisplay"></span>
</div>

类型为 "range" 的 <input> 元素用于创建用户将用来改变文本宽度的滑块控件。提供了一个 ID 为 "widthDisplay" 的 <span> 元素来显示当前的宽度值。

JavaScript

最后，让我们看看 JavaScript 代码。它首先使用 Document.getElementById() 来存储它需要访问的元素的引用。

const widthSlider = document.getElementById("widthSlider");
const widthDisplay = document.getElementById("widthDisplay");
const textElement = document.getElementById("hello");
const baseLength = Math.floor(textElement.textLength.baseVal.value);

widthSlider.value = baseLength;

widthSlider.addEventListener("input", (event) => {
  textElement.textLength.baseVal.newValueSpecifiedUnits(
    SVGLength.SVG_LENGTHTYPE_PX,
    widthSlider.valueAsNumber,
  );
  widthDisplay.innerText = widthSlider.value;
});

widthSlider.dispatchEvent(new Event("input"));

获取元素引用后，通过在滑块控件上调用 addEventListener() 来建立一个事件监听器，以接收发生的任何 input 事件。每当滑块的值发生变化时，这些事件都会被发送，即使用户还没有停止移动它，这样我们就可以响应式地调整文本宽度。

当发生 "input" 事件时，我们调用 newValueSpecifiedUnits()，使用 SVGLength 接口的 SVG_LENGTHTYPE_PX 单位类型来指示该值代表像素，将 textLength 的值设置为滑块的新值。请注意，我们必须深入到 textLength 来获取其 baseVal 属性；textLength 存储为一个 SVGLength 对象，所以我们不能将其视为普通数字。

更新文本宽度后，widthDisplay 框的内容也会用新值进行更新，我们就完成了。

结果

这是示例的样子。尝试拖动滑块来感受它的作用。

规范

规范
Scalable Vector Graphics (SVG) 2 # TextElementTextLengthAttribute

SVG 教程：文本
SVGAnimatedLength 和 SVGLength
<text>

帮助改进 MDN

了解如何贡献

此页面最后修改于 2025年9月18日，由 MDN 贡献者。

在 GitHub 上查看此页面 • 报告此内容的潜在问题

文本长度

示例

用法说明

交互式示例

CSS

SVG

HTML

JavaScript

结果

规范

浏览器兼容性

svg.elements.text.textLength

svg.elements.textPath.textLength

svg.elements.tspan.textLength

另见

帮助改进 MDN