【前端】CSS实现文本两端对齐

一、先看效果

下面这是没有两端对齐的效果图：

下面这是两端对齐后的效果图：

实现代码：

div {
    text-align: justify;
}

二、知识点科普

在 CSS 中，text-align 属性用于设置元素内文本的水平对齐方式。它可以应用于

块级元素和一些内联元素。

以下是 text-align 属性的常用值和用法：

1. text-align: left;：将文本左对齐。
2. text-align: center;：将文本居中对齐。
3. text-align: right;：将文本右对齐。
4. text-align: justify;：将文本两端对齐，通过自动调整单词和字母间的间距来实现。
5. text-align: inherit;：继承父元素的 text-align 属性值。

以下是一些示例，展示了如何在 CSS 中使用 text-align 属性：

/* 将 <div> 元素内的文本居中对齐 */
div {
  text-align: center;
}
/* 将 <p> 元素内的文本右对齐 */
p {
  text-align: right;
}
/* 将 <h1> 元素内的文本左对齐 */
h1 {
  text-align: left;
}
/* 将 <span> 元素内的文本两端对齐 */
span {
  text-align: justify;
}

请注意，text-align 属性仅影响元素内部文本的对齐方式，并不会影响元素本身的布局。如果你想要对齐整个元素，可以考虑使用其他 CSS 属性，例如 margin 和 display。