在Flex布局开发中，实现文本不换行且横线填充剩余空间是常见的布局需求，通常用于带装饰横线的标题、列表项等场景，核心是利用Flex的属性分配空间，同时控制文本的换行行为。
核心实现思路
要实现这个效果，需要把整体容器设置为Flex布局，内部拆分为两个子元素：一个是文本元素，一个是横线元素。通过给横线元素设置flex-grow属性让它自动占据剩余空间，同时给文本元素设置不换行样式，避免文本过长时换行挤压横线的空间。
关键属性说明
- flex-grow：定义子元素的放大比例，默认值为0，设置为1时元素会占据父容器剩余的所有可用空间。
- white-space: nowrap：强制文本在同一行内显示，不会换行。
- overflow: hidden：当文本超出容器宽度时隐藏溢出内容，避免撑破布局。
- text-overflow: ellipsis：文本溢出时显示省略号，可选配置。
完整代码示例
以下是实现文本不换行、横线填充剩余空间的完整HTML和CSS代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex布局横线填充示例</title>
<style>
/* 父容器设置为Flex布局 */
.flex-container {
display: flex;
align-items: center; /* 子元素垂直居中 */
width: 500px;
margin: 20px auto;
padding: 10px;
border: 1px solid #e5e5e5;
}
/* 文本元素样式 */
.text {
white-space: nowrap; /* 禁止文本换行 */
overflow: hidden; /* 溢出隐藏 */
text-overflow: ellipsis; /* 溢出显示省略号，可选 */
margin-right: 10px; /* 文本和横线之间的间距 */
font-size: 16px;
color: #333;
}
/* 横线元素样式 */
.line {
flex-grow: 1; /* 占据剩余所有空间 */
height: 1px; /* 横线高度 */
background-color: #999; /* 横线颜色 */
}
</style>
</head>
<body>
<div class="flex-container">
<span class="text">这是一段需要保持单行的文本内容</span>
<div class="line"></div>
</div>
</body>
</html>
效果调整说明
如果需要调整文本和横线的间距，可以修改文本元素的margin-right属性值。如果横线需要更粗的视觉效果，可以调整line类的height属性。如果文本长度较短，横线仍然会正常填充剩余空间，不需要额外调整其他属性。
常见问题排查
如果出现横线没有填充剩余空间的情况，首先检查父容器是否设置了display: flex，其次确认横线元素是否设置了flex-grow: 1。如果文本出现换行，检查文本元素是否遗漏了white-space: nowrap属性，或者父容器宽度是否设置过小导致文本没有足够的展示空间。