从 React-pdf 中删除空格环绕

Question

我正在尝试生成单行文本，而不将文本进一步换行到页面下方或换成新行。我的页面宽度也是动态的，它计算元素的宽度，然后设置生成的PDF宽度。例如：“这是相当长的句子”，输出为：
“这是
相当
长句子”
当它应该只是一个连续的行时。似乎不支持

whiteSpace: nowrap

（文档），所以我不确定有什么好的解决办法。

//Calculate Element Width
const getElSize = () => {
const newWidth = ref.current.offsetWidth;
setWidth(newWidth);
console.log(width);
};

useEffect(() => {
getElSize();
}, [input]);

//PDF Output
const MyDoc = () => {
        return (
            <Document>
                <Page
                    size={{ width: width + 200 }}
                    style={{
                        fontFamily: pdfFont,
                        fontSize: textSize,
                    }}
                >
                    <View style={{ lineHeight: "0" }}>
                        <Text>{input}</Text>
                    </View>
                </Page>
            </Document>
        );
    };

Answer 1

老问题，但这也让我感到沮丧（我的文本突然开始换行到一个地方，完全没有明显的原因）。

看来您可以将

<Text>

组件的宽度设置为较大的值（在您的情况下，可能只是

width + 200

），文本将继续填充它，即使它超出了页面：

<Text style={{ width: 1000 /* something large */ }}>...</Text>

const MyDoc = () => {
        return (
            <Document>
                <Page
                    size={{ width: width + 200 }}
                    style={{
                        fontFamily: pdfFont,
                        fontSize: textSize,
                    }}
                >
                    <View style={{ lineHeight: "0" }}>
                        <Text style={{ width: 1000 }}>  {/* <==== */}
                            {input}
                        </Text>
                    </View>
                </Page>
            </Document>
        );
    };

（注意，我正在使用@react-pdf/renderer v3.1.14。）