Skip to main content

fillTextBox()v4.0.57

属于 @remotion/layout-utils 包。

计算文本是否超出框并在容器内换行。仅在浏览器中有效，不适用于 Node.js 或 Bun。

示例​

tsx
import { fillTextBox } from "@remotion/layout-utils";
 
const fontFamily = "Arial";
const fontSize = 12;
 
const box = fillTextBox({ maxLines: 4, maxBoxWidth: 100 });
box.add({ text: "Hello", fontFamily, fontSize }); // {exceedsBox: false, newLine: false}
box.add({ text: "World!", fontFamily, fontSize }); // {exceedsBox: false, newLine: false}
// Doesn't fit on the previous line anymore
box.add({ text: "How", fontFamily, fontSize }); // {exceedsBox: false, newLine: true}
// ...
// Doesn't fix in the box anymore
box.add({ text: "the end", fontFamily, fontSize }); // {exceedsBox: true, newLine: false}
tsx
import { fillTextBox } from "@remotion/layout-utils";
 
const fontFamily = "Arial";
const fontSize = 12;
 
const box = fillTextBox({ maxLines: 4, maxBoxWidth: 100 });
box.add({ text: "Hello", fontFamily, fontSize }); // {exceedsBox: false, newLine: false}
box.add({ text: "World!", fontFamily, fontSize }); // {exceedsBox: false, newLine: false}
// Doesn't fit on the previous line anymore
box.add({ text: "How", fontFamily, fontSize }); // {exceedsBox: false, newLine: true}
// ...
// Doesn't fix in the box anymore
box.add({ text: "the end", fontFamily, fontSize }); // {exceedsBox: true, newLine: false}

API​

该函数接受以下选项：

maxBoxWidth​

必需 数字

最大框宽度，单位 px。

maxLines​

必需 数字

框的最大行数。

返回值​

一个带有 add() 方法的对象，可用于向文本框添加单词。

参数​

text​

必需 字符串

任何字符串。

fontFamily​

必需 字符串

与 CSS 样式 font-family 相同。

fontSize​

必需 数字

与 CSS 样式 font-size 相同。仅允许 数字，单位 px。

fontWeight​

字符串

与 CSS 样式 font-weight 相同。

fontVariantNumeric​

字符串

与 CSS 样式 font-variant-numeric 相同。

textTransformv4.0.140​

字符串

与 CSS 样式 text-transform 相同。

validateFontIsLoaded?v4.0.136​

布尔值

如果设置为 true，将使用备用字体进行第二次测量，如果产生相同的测量结果，则假定使用了备用字体，并将抛出错误。

additionalStylesv4.0.140​

对象，可选

影响文本布局的其他 CSS 属性。

返回值​

add 方法返回一个带有两个属性的对象：

  • exceedsBox: 布尔值，添加单词是否会导致文本超出框的宽度。
  • newLine: 布尔值，添加单词是否需要在文本框中开始新行。

重要考虑事项​

请参阅 最佳实践 以确保获得正确的测量结果。

参见​

Please paste the Markdown content you'd like me to translate into Chinese.