javascript 在 nextjs应用程序中的最后两个单词之间强制

xriantvc 于 2023-05-05 发布在 Java

关注(0)|答案(1)|浏览(168)

在我构建的所有应用程序中，我一直在手动添加在所有段落的最后两个字之间，以避免寡妇，因为他们不是那么美观。我已经尝试了多种方法来为nextjs设置插件，这些插件可以在我的代码中使用该功能。
我知道在客户端解决这个问题很容易，但它会导致第一段的布局变化，虽然你可以手动添加它，但这并不是正确的解决方案。老实说，我认为这应该是一个CSS选项，但我知道没有。
所以我仍然想知道是否有一种方法可以让您的应用程序在JSX代码变成HTML页面之前操作它？.
我在想另一个选择是将文本存储在其他地方，并始终使用但这将需要建立一个数据库连接，而这并不总是必要的。

JavaScript

来源：https://stackoverflow.com/questions/76166196/force-nbsp-between-the-last-two-words-in-nextjs-app

1条答案

按热度按时间

2ledvvac1#

1 .在pages/_document.js文件中创建自定义Document组件。该组件负责呈现Next.js生成的HTML文档。
2 .在Document组件中，重写render方法以修改生成的HTML。您可以使用ReactDOMServer.renderToString方法将应用的JSX代码呈现为HTML，然后在返回HTML字符串之前对其进行操作。
下面是一个示例代码：

enter code here
 import Document, { Html, Head, Main, NextScript } from 'next/document'
 import ReactDOMServer from 'react-dom/server'

 class MyDocument extends Document {
 static async getInitialProps(ctx) {
 const initialProps = await Document.getInitialProps(ctx)
 return { ...initialProps }
 }

   render() {
   const { html } = ReactDOMServer.renderToString(<Main />)
   const modifiedHtml = html.replace(/(\s[\w'-]+)(\s[\w'-]+)(<\/p>)/gi, ' 
 $1&nbsp;$2$3')

    return (
    <Html>
    <Head />
    <body dangerouslySetInnerHTML={{ __html: modifiedHtml }} />
    <NextScript />
  </Html>
   )
 }
}

export default MyDocument

此代码使用正则表达式查找段落中出现的所有由空格分隔的两个单词（
）标记，并将空格替换为不间断的空格字符（）。
请注意，这种方法直接修改生成的HTML，因此如果您在Next.js中使用客户端渲染（CSR）或静态站点生成（SSG），则它将不起作用。此外，此解决方案假定您的所有段落都 Package 在
标签。
我希望这可以帮助您在Next.js中在段落的最后两个单词之间添加不间断的空格字符！

赞(0）回复(0）举报 2023-05-05

我来回答

javascript 在 nextjs应用程序中的最后两个单词之间强制

1条答案

相关问题

热门标签

最新问答

javascript 在&nbsp;nextjs应用程序中的最后两个单词之间强制

1条答案

相关问题

热门标签

最新问答

javascript 在 nextjs应用程序中的最后两个单词之间强制