单行文本怎么实现两端对齐？

参考答案：

说起两端对齐，大家首先想到的可能是 text-align: justify;，但justify对最后一行无效。

通常这样的排版对整段文字是极好的，我们并不希望当最后一行只有两个字时也两端对齐，毕竟这是不便于阅读的，那么当我们只有一行文本，但要实现单行文本两端对齐怎么解决？

方法一：添加一行

根据justify对最后一行无效，我们可以新增一行，使该行文本不是最后一行，实现如下：

//html
<div class="item">
    <span class="label" >{{item.label}}</span>：
    <span class="value">{{item.value}}</span>
</div>

//scss
.item {
    height: 32px;
    line-height: 32px;
    margin-bottom: 8px;
    .label {
        display: inline-block;
        height: 100%;
        width: 100px;
        text-align: justify;
        vertical-align: top;
        &::after {
            display: inline-block;
            width: 100%;
            content: '';
            height: 0;
        }
    }
    .value {
        padding-right: 10px;
    }
}

方法二： text-align-last

text-align-last，该属性定义的是一段文本中最后一行在被强制换行之前的对齐规则。

//scss
.item {
    margin-bottom: 8px;
    .label {
        display: inline-block;
        height: 100%;
        min-width: 100px;
        text-align: justify;
        text-align-last: justify;
    }
    .value {
        padding-right: 10px;
    }
}

现在的浏览器基本都支持该属性。

题目要点：

在 CSS 中，可以通过设置 text-align 属性为 justify 来实现单行文本的两端对齐，但这种方法通常用于多行文本。对于单行文本，可以使用以下技巧：

方法 1: text-align: justify 和 hyphens

.single-line-text {
  text-align: justify;
  hyphens: auto;
}
.single-line-text::after {
  content: '';
  display: inline-block;
  width: 100%;
}

这种方法利用 justify 对齐文本，并使用 hyphens 自动断字，然后在文本后添加一个空的 ::after 伪元素来填充剩余空间。

方法 2: text-align: justify 和 text-justify

.single-line-text {
  text-align: justify;
  text-justify: inter-word; /* 仅在 WebKit 浏览器中有效 */
}

这种方法在 WebKit 浏览器中通过 text-justify 属性实现单行文本的两端对齐。

方法 3: 使用 CSS Grid

.single-line-text {
  display: grid;
  grid-template-columns: auto 1fr;
  justify-content: end;
}
.single-line-text::before,
.single-line-text::after {
  content: '';
}

这种方法通过将文本包裹在一个 CSS Grid 容器中，并使用 justify-content 属性将文本推到容器的末端，实现两端对齐。

考察重点

• 理解：不同浏览器对 text-align: justify 的支持和行为。
• 应用：选择合适的方法实现单行文本的两端对齐。