createPortal的使用

text-align: justify 是 CSS 中用于设置文本水平对齐方式的属性值，其核心作用是让块级元素内的文本内容实现​​两端对齐​​（Justify Alignment）。以下是关于它的详细解析1：

​​核心效果​​

当 text-align: justify 应用于块级元素（如 <p>、<div> 等）时，文本的​​左右两侧会严格贴合容器的左右边缘​​，中间单词或字符之间的空白会被均匀拉伸，使每一行（除最后一行外）的文本填满整行宽度。

​​关键特性​​

1. ​​仅影响多行文本​​

text-align: justify 对单行文本无意义（因为单行左右自然贴合），主要作用于​​换行后的多行文本​​。例如：

<div style="width: 300px; text-align: justify;">
  这是一段需要两端对齐的文本。默认情况下，单行文本会左对齐；但启用 justify 后，多行文本的左右两侧会紧贴容器边缘，中间空白被均匀拉伸。
</div>

效果：文本的每一行（除最后一行）左右边缘与容器对齐，中间空白均匀分布。

2. ​​最后一行默认左对齐​​

浏览器的默认行为是：​​最后一行文本不会应用两端对齐​​，而是保持左对齐（即使容器宽度足够）。这是为了避免最后一行（通常是短文本）因强行拉伸导致可读性下降。例如：

<div style="width: 300px; text-align: justify;">
  第一行文本。第二行文本。第三行（最后一行）文本。
</div>

效果：前两行两端对齐，第三行左对齐。

3. ​​依赖单词/字符间隔​​

两端对齐的效果依赖于文本中的​​自然间隔​​（如英文单词间的空格、中文字符间的间隙）。如果文本是连续无间隔的（如无空格的长字符串），justify 可能无法生效（或仅在容器宽度变化时微调）。

​​进阶控制：text-justify 属性​​

默认的 text-align: justify 可能无法满足所有场景（如需要更精细的间隔调整），此时可以使用 text-justify 属性（需配合 text-align: justify）进一步控制对齐方式。

text-justify 的常用值：

• auto（默认）：浏览器自动选择对齐策略（通常基于语言习惯，如英文优先单词间隔，中文优先字符间隔）。
• inter-word：仅在单词/词语之间调整间隔（适用于英文等多词语言）。
• inter-character：在字符之间调整间隔（适用于中文、日文等无空格分隔的语言）。
• distribute：强制平均分配间隔（包括行首和行尾的空格，类似报纸排版）。

​​示例​​：

/* 中文强制字符间隔对齐 */
.chinese-justify {
  text-align: justify;
  text-justify: inter-character; /* 字符间调整间隔 */
}

/* 英文强制单词间隔对齐 */
.english-justify {
  text-align: justify;
  text-justify: inter-word; /* 单词间调整间隔 */
}

​​注意​​：text-justify 的部分值（如 distribute）在现代浏览器中支持有限（需前缀或特定环境），实际使用中建议优先使用 auto 或 inter-word/inter-character。

​​常见问题与解决方案​​

1. 最后一行无法两端对齐？

这是浏览器默认行为，若需强制最后一行也两端对齐，可通过以下方式模拟：

• ​​添加伪元素​​：在文本末尾添加一个宽度为 100% 的透明伪元素，迫使最后一行成为“非最后一行”。 .force-justify { text-align: justify; /* 伪元素撑开最后一行 */ &::after { content: ""; display: inline-block; width: 100%; } }
• ​​使用 text-align-last​​：通过 text-align-last: justify 强制最后一行两端对齐（需注意浏览器兼容性）。 .last-justify { text-align: justify; text-align-last: justify; /* 最后一行两端对齐 */ }

2. 中文对齐效果不明显？

中文文本无天然单词间隔（如英文空格），默认 justify 效果可能较弱。可通过以下方式优化：

• ​​增加字符间距​​：配合 letter-spacing 微调（但可能影响整体美观）。
• ​​使用 text-justify: inter-character​​：强制在字符间调整间隔（部分浏览器支持）。

3. 容器宽度不足时失效？

justify 依赖足够的容器宽度来拉伸文本。若容器过窄（如小于一个单词/字符的宽度），文本会自动换行，导致无法对齐。需确保容器宽度合理（可通过 min-width 限制最小宽度）。

​​适用场景​​

• ​​印刷品/报纸排版​​：两端对齐是传统印刷品的经典排版方式，提升文本整洁度。
• ​​长文本段落​​：如博客文章、文档说明等，避免左对齐导致的右侧参差不齐。
• ​​设计感需求​​：需要严格控制文本边缘对齐的设计场景（如海报、宣传页）。

​​总结​​

text-align: justify 是 CSS 中实现文本两端对齐的核心属性，主要用于优化多行文本的视觉整齐度。使用时需注意其默认不作用于最后一行、依赖文本间隔等特性，结合 text-justify 或 text-align-last 可进一步调整细节。合理使用可提升页面文本的可读性和美观度。