Question 337439 in Html Question posted in
Some basic documentation can be found here.

Html – Why does my paragraph element extend under the adjacent image?

My code in react.js using styled components have this p that isn’t making the text right

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>

I tried making the p text goes to the bottom when hitting the image with max width but it didn’t work, I don’t know what to do

Tags:

2

Answers


  1. 0

    You are probably looking for the CSS property word-break.

    If you set it word-break: break-all on your Paragraph component it should as you expect.

    Check out the documentation for other options for this property.

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

    Login or Signup to reply.
  2. 0

    Word break is a good option but I don’t think you are actually going to write one big word without any spaces in actual project.
    Right now it’s just one word, that’s why it’s not breaking, but if it behaves the dame way for normal sentences then try this –

    const Paragraph = styled.p`
    font-size: 16px;
    color: black;
    font-family: 'Mont-serrat', sans-serif;
    max-width: calc(30vw - 8em);
    `;
const Texts = styled.div`
    padding: 4em;
    max-width: 30vw;
    overflow: hidden;
`;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search