为什么我的段落元素延伸到相邻图像下方？

Question

我在react.js中使用样式化组件的代码有这个p，它没有使文本正确

const InnerCarousel = styled.div`
    display: flex; // Use flexbox to center the image
    justify-content: center; // Center horizontally
    align-items: center; // Center vertically
    height: 110vh; // Make sure the card takes the full height of the viewport
`;
const Texts = styled.div`
    padding: 4em;
    max-width: 30vw;
`;
const Images = styled.img`
    min-width: 10vw;
    max-width: 60vw;
    min-height: 10vh;
    max-height: 60vh;
    border-radius: 60px;
    `;
const H1 = styled.h1`
    font-size: 24px;
    `;
const Paragraph = styled.p`
    font-size: 16px;
    color: black;
    font-family: 'Mont-serrat', sans-serif;
    max-width: 30vw;
    `;


`;
export default function CarouselHome() {
  return (
    <>
      <Swiper navigation={true} modules={[Navigation]} className="mySwiper">
        <SwiperSlide style={{ height: '80vh' }}>
                <InnerCarousel>
                    <Texts>
                        <H1>eCO Funding</H1>
                        <Paragraph>ParagraphParagraphParagraphParagraphParagrapParagraphParagraphParagraphParagraphParagraph </Paragraph>
                    </Texts>
                    <Images src={Image} alt="carousel" />
                </InnerCarousel>
           

我尝试在以最大宽度点击图像时使 p 文本转到底部，但它不起作用，我不知道该怎么办

Answer 1

您可能正在寻找 CSS 属性

word-break

。

如果您在

word-break: break-all

组件上设置了

Paragraph

，它应该如您所愿。

查看此属性的其他选项的文档。

https://developer.mozilla.org/en-US/docs/Web/CSS/word-break