根据div高度限制文本显示字数实现水平排列卡片等高布局

核心修改步骤 #

• 卡片等高实现
  你使用的Bootstrap栅格的.row默认是flex布局，所有.col子元素默认等高，只需给每个.col内部的卡片根容器添加height: 100%样式，即可让所有卡片自动撑满列高度，实现整体等高对齐。
• 图片高度统一
  给图片外层容器添加样式aspect-ratio: 16/9; overflow: hidden;，同时给img标签补充样式height: 100%; object-fit: cover;，无论原图尺寸多大，都会按统一比例裁剪展示，不会出现图片高度不一致挤压文本区域的问题。
• 段落自适应溢出省略
  首先给卡片下方带20px内边距的内容容器添加样式display: flex; flex-direction: column; height: calc(100% - 图片容器高度);，让内部元素垂直排列并占满卡片减去图片后的剩余高度。
  再给段落元素添加如下样式，即可实现超出可用高度时末尾自动显示省略号：

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
/* 可根据实际布局调整行数，也可直接设置max-height为你需要的段落最大高度 */
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;

调整后的核心代码示例 #

<div className="col-lg-4 col-md-6 col-sm-6 col-12">
  <div
    style={{
      height: "100%", /* 新增：撑满列高度 */
      display: "block",
      marginBottom: "20px",
      cursor: "pointer",
      textAlign: "center",
      background: "#FEFEFE",
      boxShadow: "0px 4px 4px rgba(0, 0, 0, 0.25)",
      borderRadius: "10px"
    }}
  >
    {/* 图片容器新增样式 */}
    <div style={{ aspectRatio: "16/9", overflow: "hidden" }}>
      <img 
        src="blogContent.png" 
        style={{ width: "100%", height: "100%", objectFit: "cover" }} 
      />
    </div>
    {/* 内容容器新增flex相关样式 */}
    <div style={{ 
      padding: "20px", 
      textAlign: "start",
      display: "flex",
      flexDirection: "column",
      height: "calc(100% - 56.25vw)" /* 16:9比例的高度计算，可根据实际调整 */
    }}>
      <div style={{ color: "#0E2043", fontSize: "13px" }}>
        Biometric Passport
      </div>
      <div
        style={{
          color: "#0E2043",
          fontSize: "15px",
          fontWeight: "600",
          marginTop: "10px"
        }}
      >
        Commonwealth Of Dominica Announces The Launch of its New
        Biometric Passport
      </div>
      {/* 段落新增溢出省略样式 */}
      <div
        style={{
          color: "#0E2043",
          fontSize: "13px",
          marginTop: "10px",
          overflow: "hidden",
          textOverflow: "ellipsis",
          display: "-webkit-box",
          WebkitLineClamp: 3,
          WebkitBoxOrient: "vertical",
          flex: 1 /* 新增：占满剩余空间 */
        }}
      >
        {" "}
        你的段落文本内容
      </div>
      <div
        style={{
          color: "#E3AB50",
          fontSize: "13px",
          marginTop: "10px"
        }}
      >
        Read More
      </div>
    </div>
  </div>
</div>

所有卡片按上述规则修改后，即可实现统一高度，文本内容超出时自动显示省略号的效果。

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