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

How to move paragraph to next line when the width of parent component is reached – Html

I’m trying to make horizontally scrollable card in mobile version of my project using Tailwind CSS. How to move the card title to next line when the max width of it’s parent component is reached.

Here’s my code:

<section id="pendidikan" class="container mx-auto px-4 sm:mt-12">
        <div class="snap-x flex whitespace-nowrap flex-nowrap overflow-x-scroll hide-scroll-bar gap-4">
            <!-- Program Diploma dan Sarjana Terapan -->
            <div class="w-3/4 bg-secondary group snap-center overflow-hidden sm:w-full">
                <div class="object-cover aspect-square w-full overflow-hidden">
                    <img class="aspect-square w-full object-cover group-hover:scale-105 transition-all" src="../assets/diploma.jpg" alt="Program Diploma">
                </div>
                <div class="p-4 flex-col w-full">
                    <p class="text-white text-base break-words">Program Diploma dan Pascasarjana</p>
                    <a class="text-white font-plusJakarta font-light text-sm " href="#">Baca selengkapnya</a>
                </div>
            </div>
        </div>
    </section>

Here’s the result. As you can see the title just overflowing out of it’s parent component. I tried to use word break but it wont work.

enter image description here

Tags:

2

Answers


  1. 0

    Try adding maximum width to break the content,

    <html>
    <style>
        .test {
            max-width: 250px;
        }
    </style>
    <section id="pendidikan" class="container mx-auto px-4 sm:mt-12">
        <div class="snap-x flex whitespace-nowrap flex-nowrap overflow-x-scroll hide-scroll-bar gap-4">
            <!-- Program Diploma dan Sarjana Terapan -->
            <div class="w-3/4 bg-secondary group snap-center overflow-hidden sm:w-full">
                <div class="object-cover aspect-square w-full overflow-hidden">
                    <img class="aspect-square w-full object-cover group-hover:scale-105 transition-all" src="./assets/test2.jpg" alt="Program Diploma">
                </div>
                <div class="p-4 flex-col w-full test">
                    <span class="text-white text-base break-words">Program Diploma dan Pascasarjana Program Diploma dan Pascasarjana Program Diploma dan Pascasarjana Program Diploma dan Pascasarjana Program Diploma dan Pascasarjana Program Diploma dan Pascasarjana</span>
                    <a class="text-white font-plusJakarta font-light text-sm " href="#">Baca selengkapnya</a>
                </div>
            </div>
        </div>
    </section>
</html>
    Login or Signup to reply.
  2. 0

    Did you try to add whitespace-normal on your p element to override the whitespace-nowrap from your parent div element? And a max-width on your parent div for good measure.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search