英文:
How to move paragraph to next line when the width of parent component is reached
问题
我正在尝试在我的项目的移动版本中使用Tailwind CSS创建可以水平滚动的卡片。当达到其父组件的最大宽度时，如何将卡片标题移到下一行。
以下是我的代码:
<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>
这是结果。正如您所看到的，标题只是溢出其父组件。我尝试使用break-words，但它不起作用。
英文:
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:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<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>
<!-- end snippet -->
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.
答案1
得分: 1
你试过在你的 p 元素上添加 whitespace-normal，以覆盖父级 div 元素上的 whitespace-nowrap 吗？然后在父级 div 上加一个 max-width 以确保样式生效。
英文:
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.
答案2
得分: 0
尝试添加最大宽度以限制内容，
<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>
注意：代码部分未翻译。
英文:
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>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论