如何使用Tailwind CSS将卡片按钮固定在Div底部并适配标题行数

1. 实现标题显示1-2行 #

给标题元素添加Tailwind的line-clamp-2 overflow-hidden类（如果要固定一行显示就用line-clamp-1），这样标题内容超过指定行数时会自动截断，同时保持布局稳定。

2. 把按钮固定在卡片底部 #

需要把卡片容器设置为垂直方向的flex布局，让中间内容区域自动填充剩余空间，具体操作：

• 给最外层div添加flex flex-col，让内部元素垂直排列
• 给按钮上方的所有内容包裹一个容器（或直接给中间内容块加flex-1），让这部分内容占据卡片剩余高度，按钮就会被“挤”到底部

修改后的完整代码 #

<div className='w-full lg:w-1/4 bg-white rounded-xl p-6 flex flex-col'>
  {/* 限制最多两行显示的标题 */}
  <h2 className='text-blue-500 text-lg font-bold leading-7 mb-4 line-clamp-2 overflow-hidden'>
    Credit Hour Remaining 7 hr
  </h2>
  <hr className='border-[#1C1B1B33] mb-4' />
  <h2 className='text-[#1C1B1B] text-xl font-bold line-clamp-2 overflow-hidden'>
    Course Name
  </h2>
  {/* 中间内容区域：占据卡片剩余高度 */}
  <div className='flex-1'>
    <ul className='my-5'>
      {selectedCourses.map((course, ind) => {
        return (
          <li key={course.course_id}>
            {ind + 1} {course.course_title}
          </li>
        );
      })}
    </ul>
    <hr className='border-[#1C1B1B33]' />
    <h3 className='my-5 text-[#1C1B1BCC] text-sm font-medium'>
      Total Credit Hour : {13}
    </h3>
    <hr className='border-[#1C1B1B33] mb-4' />
    <h3 className='text-[#1C1B1BCC] text-sm font-medium'>
      Total Price : 48000 USD
    </h3>
  </div>
  {/* 固定在底部的按钮 */}
  <button className='mt-4 bg-blue-500 text-white px-4 py-2 rounded-md'>
    确认选课
  </button>
</div>

关键细节说明 #

• flex flex-col：让卡片内部元素垂直排列，为底部固定按钮提供布局基础
• flex-1：让中间内容区域自动填充卡片剩余高度，确保按钮始终处于底部位置
• line-clamp-2 overflow-hidden：限制标题最多显示两行，超出部分自动省略（注意line-clamp依赖overflow-hidden生效）
• 修正了原代码中错误的text-4类，替换为Tailwind标准的text-sm

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