Flex布局下实现动态文本与横线同行并占满整行的问题

你可以通过调整Flex布局属性并强制文本单行显示，来实现文本与横线同行且横线占满剩余空间的效果，具体实现如下：

核心思路 #

• 强制文本容器保持单行，避免换行
• 让横线容器自动占据父元素的剩余空间

代码实现 #

<div class="line-wrap">
  <span class="text">Art - Music</span>
  <span class="line"></span>
</div>

.line-wrap {
  width: 100%;
  display: flex;
  align-items: center; /* 让文本和横线垂直居中对齐 */
  gap: 8px; /* 文本与横线的间距，可按需调整 */
}

.text {
  white-space: nowrap; /* 强制文本单行显示 */
  overflow: hidden; /* 可选：防止文本超长溢出，配合下方属性可显示省略号 */
  /* text-overflow: ellipsis; 可选：文本超长时显示省略号 */
}

.line {
  flex: 1; /* 自动填充父容器剩余所有空间 */
  height: 1px;
  background-color: #ccc; /* 横线颜色，可按需调整 */
}

关键属性说明 #

• white-space: nowrap：确保无论文本长度如何变化，都始终保持单行显示
• flex: 1：给横线容器设置该属性，使其自动占据父元素的剩余空间
• align-items: center：保证文本与横线在垂直方向上对齐，提升视觉协调性

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