如何在Tailwind CSS中实现文本响应式及设置overflow:hidden？

1. 如何实现文本的响应式效果？ #

Tailwind CSS 自带sm:、md:、lg:、xl:这类响应式前缀，给文本相关类加上前缀就能实现不同屏幕下的样式适配：

• 字体大小自适应：比如小屏幕用基础字号，中等屏幕放大，示例：

  <p class="text-base md:text-lg lg:text-xl">响应式大小文本</p>
  

• 文本对齐适配：小屏幕左对齐，大屏幕居中，示例：

  <p class="text-left md:text-center">自适应对齐的文本</p>
  

• 文本截断/换行响应式：小屏幕自动换行，大屏幕截断显示省略号：

  <p class="whitespace-normal md:truncate max-w-md">长文本内容示例...</p>
  

• 字体粗细、行高、文本颜色等属性，都可以通过响应式前缀调整，比如sm:font-bold md:font-normal。

2. 如何隐藏指定内容或设置overflow:hidden？ #

隐藏指定内容 #

• 完全隐藏（不占布局空间）：给元素加hidden类：

  <div class="hidden">这个元素会被完全隐藏</div>
  

• 响应式隐藏：比如仅在小屏幕隐藏，大屏显示：

  <div class="sm:hidden">小屏幕隐藏，大屏幕可见</div>
  

• 视觉隐藏（仍占空间）：用invisible类：

  <div class="invisible">元素不可见，但保留布局位置</div>
  

设置overflow:hidden #

给容器添加overflow-hidden类，就能隐藏容器内超出的内容，通常和max-h-*类配合实现内容截断。比如你提供的评论容器可修改为：

<div class="bg-slate-200 w-full max-h-48 sm:max-h-64 p-4 grid grid-rows-2 overflow-hidden">
  <!-- 内部内容 -->
</div>

当内容超出容器最大高度时，超出部分会被隐藏。如果需要滚动查看，可替换为overflow-auto（自动出现滚动条）或overflow-scroll（始终显示滚动条）。

客户的激励话语
“幸福是努力让他人快乐的副产品。”

示例代码（调整后） #

<div class="sm:grid sm:grid-cols-3 gap-4 mt-5">
     <div class="mt-5">
        <!-- <img src="image/review.png" alt="" class=""> -->
        <div class="bg-slate-200 w-full max-h-48 sm:max-h-64 p-4 grid grid-rows-2 overflow-hidden">

                <div class="flex gap-5">
                        <div class="">
                            <div class="bg-black h-16 w-16"></div>
                        </div>
                        <div class="-space-y-1">
                            <p class="text-lg font-bold sm:text-xl">Adish Dahal</p>
                            <p class="text-xl font-bold">
                                <iconify-icon icon="emojione:star"></iconify-icon>
                                <iconify-icon icon="emojione:star"></iconify-icon>
                                <iconify-icon icon="emojione:star"></iconify-icon>
                                <iconify-icon icon="emojione:star"></iconify-icon>
                                <iconify-icon icon="emojione:star"></iconify-icon>
                            </p>
                            <p class="text-sm font-light">2078-05-06</p>

                        </div>
                </div>

                <div class="">
                    <p class="text-justify">
                        In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content <a href="#" class="text-blue-500">read more</a>
                    </p>
                </div>
        </div>
     </div>
</div>

内容的提问来源于stack exchange，提问作者user13489170