如何避免 Motion Canvas 文本中的空白折叠？

Question

我最近使用 Motion Canvas 来制作动画。我想避免 Txt 组件中的空格崩溃。我一直在寻找解决方案，例如将空白样式更改为 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

如有任何帮助，我们将不胜感激。

Answer 1

我找到了一种方法来做到这一点。有一些名为 textWrap 的属性，我可以将其设置为“pre”以停止折叠空格。但不知道是bug还是什么。我的文本是“Hello”，但它显示“Hello”。整个空间以某种方式移动。