防止段落中的文本中断

Question

文本中断

如何防止断文？我使用的是React js，所以我先将文本保存在变量中，然后在jsx中渲染。我的代码是这样的：

<h1>{singleArticle.title}</h1>

但它显示了一个破坏文本的

<p>"Eid al-Fitr Celebrated Through Distinct F

amily Recipes"</p>

我想要的是：

<p>"Eid al-Fitr Celebrated Through Distinct

Family Recipes"</p>

谢谢。非常感谢。

Answer 1

默认情况下，文本应该按照您的意愿进行打断，因此您可能会使用以下样式：

word-break: break-all;

尝试将此样式添加到h1标签：

word-break: normal !important;

万一你不知道，那就"！"重要"；意味着该值应覆盖任何继承的样式。

Soucre：https://www.w3schools.com/cssref/css3_pr_word-break.asp