当p标签内容超过一定长度时如何显示阅读更多链接？答案

【问题标题】：How to show a read more link for p tag content when it exceeds a certain length with react?当p标签内容超过一定长度时如何显示阅读更多链接？
【发布时间】：2022-06-22 17:21:21
【问题描述】：

{!post.isSearch && (
              <p className="text-sm">
                {post.postType == "post"
                  ? post.content
                  : truncate(post.content, { length: maxChars })}
              </p>
            )}
            {post.postType !== "post" && post.content.length > maxChars && (
              <NextLink href={`/post/${post.id}`}>
                <a className="text-ua-red text-left text-xs cursor-pointer 
                 hover:underline">
                  Read more...
                </a>
              </NextLink>
            )}

。我正在使用 next js 从 firebase 获取数据。数据呈现，但由于某种原因我的代码不起作用阅读更多的东西不起作用

【问题讨论】：

“阅读更多内容不起作用” - 你能更具体一点吗？什么不起作用？它没有链接到预期的页面吗？会发生什么？
你能用stackblitz.com做一个演示吗？

标签： reactjs next.js

【解决方案1】：

我让它工作了......这是代码

   {post.content.length > maxChars && (
              <NextLink href={`/post/${post.id}`}>
                <a className="text-ua-red text-left text-xs cursor-pointer hover:underline">
                  Read more...
                </a>
              </NextLink>
            )}

所以我基本上使用 css 来缩短字符串和一个条件来检查字符串长度以显示阅读更多

【讨论】：