Skip to main content

填充文本框()v4.0.57

🌐 fillTextBox()v4.0.57

属于 @remotion/layout-utils 软件包的一部分.

🌐 Part of the @remotion/layout-utils package.

计算文本是否超出盒子并在容器内换行。仅在浏览器中有效，在 Node.js 或 Bun 中无效。

🌐 Calculate whether the text exceeds the box and wraps within the container. Only works in the browser, not in Node.js or Bun.

示例​

🌐 Example

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

该函数接受以下选项：

🌐 The function takes the following options:

maxBoxWidth​

number

最大盒子宽度，单位 px。

🌐 The max box width, unit px.

maxLines​

number

盒子的最大行数。

🌐 The max lines of the box.

返回值​

🌐 Return value

一个具有 add() 方法的对象，可以用来向文本框中添加单词。

🌐 An object with an add() method, which can be used to add words to the text box.

参数​

🌐 Arguments

text​

string

任何字符串。

🌐 Any string.

fontFamily​

string

与 CSS 样式 font-family 相同。

🌐 Same as CSS style font-family.

fontSize​

number

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

🌐 Same as CSS style font-size. Only numbers allowed, unit px.

fontWeight​

string

与 CSS 样式 font-weight 相同。

🌐 Same as CSS style font-weight.

fontVariantNumeric​

string

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

🌐 Same as CSS style font-variant-numeric.

textTransformv4.0.140​

string

与 CSS 样式 text-transform 相同。

🌐 Same as CSS style text-transform.

validateFontIsLoaded?v4.0.136​

boolean

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

🌐 If set to true, will take a second measurement with the fallback font and if it produces the same measurements, it assumes the fallback font was used and will throw an error.

additionalStyles?v4.0.140​

object

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

🌐 Additional CSS properties that affect the layout of the text.

返回值​

🌐 Return value

add 方法返回一个包含两个属性的对象：

🌐 The add method returns an object with two properties:

  • exceedsBox：Boolean，用于判断添加该词是否会导致文本超过文本框的最大行数。
  • newLine：Boolean，是否在文本框中添加该词会需要另起一行。

重要考虑事项​

🌐 Important considerations

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

🌐 See Best practices to ensure you get correct measurements.

另请参阅​

🌐 See also

Last updated on