未应用溢出

Question

我正在使用 ReactJS + TailwindCSS 开发一个投资组合网站。它的一部分是名为 'About Me' 的部分，其中我有更长的文本。只要文本不是 'too long'，这个较长的文本就很适合，然后它会超出其父 div.

你可以在我的文章卡片上看到类似的效果。我希望它们保持相同的大小，但是 footer.

中的文本量

这是我的 React 组件，我在其中呈现文章卡片：

function MainComponent() {
  return (
    <div className="container my-12 mx-auto px-4 md:px-12">
      <div className="flex flex-wrap -mx-1 lg:-mx-4">
        <ProjectComponent
          projectName="Lorem Ipsum 1"
          projectDescription="Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et nisl nulla. Sed tincidunt diam sit amet dictum posuere. Ut diam velit, rhoncus nec ligula vel, hendrerit hendrerit dui. Nunc eget augue faucibus, interdum diam condimentum, ullamcorper ex. Aenean ultricies urna at posuere pharetra. Nunc facilisis velit vitae ornare pretium. Suspendisse egestas sem eu facilisis tempor. Nullam ac malesuada libero. Mauris vulputate viverra mi, ac rutrum ante suscipit in. Donec vitae aliquet dolor. Aenean malesuada nec enim in tempus."
          projectImage={TEST_IMAGE_URL}
          projectUrl="someurl"
        />
        <ProjectComponent
          projectName="Lorem Ipsum 2"
          projectDescription={TEST_ABOUT_ME}
          projectImage={TEST_IMAGE_URL}
          projectUrl="someurl"
        />
      </div>
    </div>
  )
}

这是我的页眉组件（您可以看到溢出的关于我的部分）

function HeaderComponent() {
  return (
    <div className="max-w-full h-1/5 rounded-sm shadow-lg flex flex-row">
      <img src={profile} alt="Profile" className="flex-none w-64 p-2" />
      <div className="flex-grow min-h-full">
        <h1 className="text-lg text-white mt-10 font-sans">My Name</h1>
        <p className="text-sm text-white mt-5 font-sans">{TEST_ABOUT_ME}</p>
      </div>
      <div className="flex-none w-64"></div>
    </div>
  )
}

显示文章卡片的项目组件包含在以下 DIV 中：

<div
  className={`my-1 px-1 w-full md:w-1/2 lg:my-4 lg:px-4 lg:w-1/3 transform transition-all duration-1000 ease-out scale-${scale}`}
></div>

我很确定这是我的 Flexbox 的问题，我对此还是很陌生，但我不知道如何让我的文本不在 Y 轴上溢出。

Answer 1

您可以为此使用 h-# + max-h-# + overflow-auto。查看 working example.

<div class="flex gap-x-8">
  <div class="flex flex-1 flex-col">
    <div class="h-48 bg-gray-100"></div>
    <div class="h-48 max-h-48 overflow-x-hidden overflow-y-auto bg-blue-200">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde officiis qui rerum possimus fugit enim quos illo nostrum. Maxime soluta nostrum voluptas iusto autem, odit tenetur facere reprehenderit molestiae facilis?
    </div>
  </div>
  <div class="flex flex-1 flex-col">
   <div class="h-48 bg-gray-100"></div>
   <div class="h-48 max-h-48 overflow-x-hidden overflow-y-auto bg-blue-200">
     Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente error, vel expedita odio, nobis magni tempore optio voluptas deleniti eum nemo corrupti animi provident ipsa deserunt voluptatem sint? Est, quo.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo quidem recusandae officiis quaerat adipisci corrupti ab, dolorem, ipsum repudiandae quam asperiores esse iusto veniam cupiditate magnam! Aspernatur velit quae vero!
   Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aperiam hic magnam perspiciatis eligendi perferendis temporibus, provident nihil iste libero aliquam natus mollitia maiores. Consequuntur voluptatum repudiandae similique quo nulla accusantium!
   </div>
  </div>
</div>

未应用溢出

Overflow not being applied

html

css

flexbox

reactjs

tailwind-css