css 文字占满宽度

/* 使文字占满宽度的示例代码 */

/* 方法一：使用 text-align 和 width */
.container {
  width: 100%; /* 父容器宽度为100% */
  text-align: justify; /* 文字两端对齐 */
}

.container::after {
  content: ""; /* 创建一个伪元素 */
  display: inline-block;
  width: 100%; /* 伪元素宽度为100%，确保最后一行也拉伸 */
}

/* 方法二：使用 flexbox */
.flex-container {
  display: flex;
  justify-content: space-between; /* 子元素之间的空间均匀分布 */
  flex-wrap: wrap; /* 允许换行 */
}

.flex-item {
  flex-grow: 1; /* 子元素可以扩展以填充可用空间 */
  margin-right: 10px; /* 可选：子元素之间的间距 */
}

.flex-item:last-child {
  margin-right: 0; /* 最后一个子元素不需要右边距 */
}

解释说明：

1. 方法一：

   • 使用 text-align: justify 使文字两端对齐，但默认情况下最后一行不会拉伸。通过添加一个伪元素（::after），并将其宽度设置为100%，可以强制最后一行也拉伸到容器的宽度。

2. 方法二：

   • 使用 flexbox 布局，将父容器设置为 display: flex 并使用 justify-content: space-between 来均匀分布子元素。通过设置 flex-grow: 1，子元素可以扩展以填充可用空间，从而实现文字占满宽度的效果。

这两种方法都可以根据具体需求选择使用。