时间戳

首页 > 解决方案 > React：如何自动将长文本拆分为多个

标签？

javascript - React：如何自动将长文本拆分为多个

标签？

问题描述

我已经构建了一个用于单个团队成员页面的组件，

    {TeamData.map((item, index) => {
  return (
      <div>
        <h1 className="text-3xl xs:text-2xl md:text-3xl lg:text-5xl xl:text-6xl mb-5">{item.name}</h1>
        <p className="text-xl leading-10 uppercase mb-5 text-gray-700">{item.title}</p>
        <p className="text-xl leading-10 mb-5">{item.bio}</p>
        </div>     
  );
})}

它填充了如下所示的数据结构：

      {
id: '1',  
link: 'john-doe',
name: 'John Doe',
alt: 'John Doe',
title: 'Managing Director',
bio: 'works with retail and consumer-goods companies to guide growth, commercial and operational transformations'}

},

我的问题是很长的生物文本和一个大的p标签。我想拥有多个

<p className="text-xl leading-10 mb-5">{item.bio}</p></div>

标签，一旦生物文本超过特定长度，假设为 20 个单词。

我如何在 React 中实现这一点？

标签： javascriptreactjs

解决方案

html 的标签也用于多行，因此您不必将其分成多个标签，相反，如果您通过 css 指定它的 `max-width` 属性，则会将其分成多行。通过这种方式，您可以根据需要设置样式，可以根据需要使用“空白”以获得更好的用户体验。

推荐阅读