如何实现文本整体右对齐且每行左对齐的CSS排版效果？

你之前用的text-align: right会让每一行文本都强制右对齐，text-align-last仅作用于最后一行，所以没法实现“整体文本块靠右，内部每行左对齐”的效果。试试下面两种可行方案：

方案1：内联块容器 + 父元素文本右对齐 #

给文本套一个内联块容器，让父容器控制整体右对齐，内联块容器内部保持文本左对齐：

/* 父容器：负责让文本块整体靠右 */
.parent-container {
  text-align: right;
}

/* 文本容器：内部每行左对齐 */
.text-block {
  display: inline-block;
  text-align: left;
}

对应HTML结构：

<div class="parent-container">
  <div class="text-block">
    第一行文本内容<br>
    第二行更长一点的文本内容<br>
    第三行短文本
  </div>
</div>

方案2：Flex布局实现 #

利用flex的justify-content: flex-end让文本块靠右，文本块内部保持左对齐：

.parent-container {
  display: flex;
  justify-content: flex-end;
}

.text-block {
  text-align: left;
}

HTML结构和方案1一致。

这两种方案都能实现：整个文本块靠右侧对齐，同时块内每行文本保持左对齐的效果，匹配你想要的排版需求。

内容的提问来源于stack exchange，提问作者Samuel D.