js 文字两端对齐

在JavaScript中实现文字两端对齐（也称为“ justify text”）通常涉及到CSS样式的应用，因为纯JavaScript并不直接提供文本对齐的功能。不过，可以通过JavaScript动态地设置CSS样式来实现文本的两端对齐。

基础概念

文字两端对齐是一种文本排版方式，其中文本行的左右两端都与页面边缘对齐，而单词之间的间距会根据需要进行调整。

类型

左对齐：文本左边缘对齐，右边缘不规则。
右对齐：文本右边缘对齐，左边缘不规则。
居中对齐：文本在中间对齐，左右两边不规则。
两端对齐：文本左右两边都对齐，单词间距均匀分布。

应用场景

报纸、杂志等印刷媒体的文章排版。
网页设计中的长段落文本展示。
书籍和其他出版物的正文排版。

实现方法

在HTML中，你可以使用CSS的 text-align 属性来实现文字两端对齐：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>两端对齐示例</title>
<style>
  .justify-text {
    text-align: justify;
  }
</style>
</head>
<body>

<p class="justify-text">
  这是一个两端对齐的文本示例。在这段文本中，你可以看到文本的左右两端都是对齐的，单词之间的间距会根据需要进行调整。
</p>

</body>
</html>

遇到的问题及解决方法

最后一行不对齐：在某些浏览器中，使用 text-align: justify; 时，最后一行可能不会两端对齐。可以通过设置 text-align-last 属性来解决这个问题：

.justify-text {
  text-align: justify;
  text-align-last: justify;
}

单行文本的对齐问题：如果文本只有一行，设置 text-align: justify; 可能不会有任何效果。可以通过添加额外的空格或者使用伪元素来解决：

.justify-text::after {
  content: '';
  display: inline-block;
  width: 100%;
}

兼容性问题：不同的浏览器可能会有不同的渲染效果。可以通过检测浏览器类型和版本，然后应用特定的样式来解决兼容性问题。

示例代码

以下是一个完整的HTML和CSS示例，展示了如何使用JavaScript动态设置文字两端对齐：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>两端对齐示例</title>
<style>
  .justify-text {
    text-align: justify;
  }
</style>
</head>
<body>

<p id="text" style="width: 300px;">
  这是一个两端对齐的文本示例。在这段文本中，你可以看到文本的左右两端都是对齐的，单词之间的间距会根据需要进行调整。
</p>

<button onclick="justifyText()">两端对齐</button>

<script>
function justifyText() {
  var textElement = document.getElementById('text');
  textElement.classList.add('justify-text');
}
</script>

</body>
</html>

在这个示例中，点击按钮会触发 justifyText 函数，该函数会给文本元素添加一个类，从而应用两端对齐的样式。