如何避免Motion Canvas的Txt组件中空白符折叠？

问题重现 #

你在使用Motion Canvas制作动画时，发现Txt组件会自动折叠文本中的连续空白符，尝试设置whitespace样式为pre也未生效。你的组件代码如下：

interface TextNodeProps {
    text: string;
    color: string;
}

interface ColorNodeProps {
    text: string;
}

const Red = ({text}: ColorNodeProps) => <TextNode text={text} color='#ff0000'/>
const Green = ({text}: ColorNodeProps) => <TextNode text={text} color='#00ff00'/>
const TextNode = ({text, color}: TextNodeProps) => <Txt text={text} fill={color}/> 

当使用<Red text='Hello World'/>时，渲染结果为Hello World，连续空白符被折叠，而你需要保留原有的空格显示为Hello World。

可行解决方案 #

方案1：使用Txt组件的preserveWhitespace属性 #

Motion Canvas的Txt组件内置了preserveWhitespace属性，启用后可直接保留文本中的连续空白符，无需手动处理样式：

const TextNode = ({text, color}: TextNodeProps) => <Txt text={text} fill={color} preserveWhitespace />

方案2：正确设置whiteSpace样式 #

如果你之前尝试设置样式时用了小写的whitespace，这是错误的——Motion Canvas的样式属性采用驼峰命名法，应改为whiteSpace：

const TextNode = ({text, color}: TextNodeProps) => <Txt text={text} fill={color} style={{whiteSpace: 'pre'}} />

whiteSpace: 'pre'会让文本保留所有空白符，同时不会自动换行；如果需要保留空白符且允许自动换行，可以改用whiteSpace: 'pre-wrap'。

验证效果 #

修改后再使用<Red text='Hello World'/>，即可渲染出带有连续空格的文本：

Hello    World

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