如何用HTML、CSS、Bootstrap实现垂直对齐及文本溢出省略？

需求说明 #

• 所有加粗字段需实现垂直对齐
• 非加粗文本溢出时显示省略号“...”
• 已尝试使用CSS、Bootstrap解决该问题

示例布局参考：包含加粗标签与普通文本的行内布局，要求加粗部分与普通文本垂直居中，普通文本超出容器宽度时自动截断并显示省略号

CSS原生实现方案 #

通过Flex布局实现垂直对齐，结合文本溢出属性处理省略号：

HTML结构 #

<div class="content-row">
  <strong class="label">加粗字段：</strong>
  <span class="content">这里是可能会溢出的非加粗文本，当内容长度超过容器宽度时将显示省略号...</span>
</div>

CSS样式 #

.content-row {
  display: flex;
  align-items: center; /* 垂直居中对齐 */
  width: 300px; /* 设定容器宽度，可根据实际需求调整 */
  margin: 8px 0;
}

.label {
  margin-right: 10px;
  flex-shrink: 0; /* 防止加粗标签被压缩 */
}

.content {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Bootstrap实现方案 #

利用Bootstrap内置的flex与文本溢出类快速实现：

HTML结构 #

<div class="d-flex align-items-center w-25 mb-2">
  <strong class="fw-bold me-2">加粗字段：</strong>
  <span class="text-truncate">这里是可能会溢出的非加粗文本，当内容长度超过容器宽度时将显示省略号...</span>
</div>

说明：

• d-flex + align-items-center 实现垂直对齐
• text-truncate 自动处理文本溢出省略号，需确保父容器有明确宽度（如w-25）

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