如何仅对第二行文本设置宽度限制并显示省略号？

要实现仅截断第二行文本，同时在 hover 时显示图标的效果，核心思路是将两行文本分离为独立容器，避免全局截断属性影响第一行。具体实现步骤如下：

• 分离文本容器：把第一行和第二行文本分别放在不同的块级元素中，确保第一行不受截断规则影响。
• 单独处理第二行：对第二行文本容器应用单行截断属性，仅限制第二行的显示。
• Hover 动态调整空间：使用 Flexbox 布局，在 hover 时收缩第二行文本的宽度，腾出空间显示隐藏的图标。

示例代码 #

HTML 结构

<div class="text-box">
  <div class="line-one">this is first line text</div>
  <div class="line-two-wrap">
    <span class="line-two">this is second line text that needs to be truncated</span>
    <span class="action-icons">🔍 📌</span>
  </div>
</div>

CSS 样式

.text-box {
  width: 220px; /* 固定容器宽度，模拟实际场景 */
}

.line-one {
  white-space: nowrap; /* 确保第一行不换行 */
  margin-bottom: 6px;
}

.line-two-wrap {
  display: flex;
  align-items: center;
}

.line-two {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: flex 0.3s ease;
}

.action-icons {
  margin-left: 8px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.text-box:hover .line-two {
  flex: 0 1 calc(100% - 50px); /* 收缩文本宽度，为图标预留空间 */
}

.text-box:hover .action-icons {
  opacity: 1;
}

原理说明 #

1. 分离容器：第一行文本使用独立的 div，设置 white-space: nowrap 保证内容不换行，完全展示。
2. 第二行截断：第二行文本放在 Flex 容器内的 span 中，通过 flex:1 占据剩余空间，配合 text-overflow: ellipsis 实现单行截断。
3. Hover 交互：当鼠标悬停时，调整第二行文本的 flex 属性收缩宽度，同时将图标的透明度设为 1，实现空间动态分配和图标显示。

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