CSS实现主文本左对齐、自动换行内容右对齐的方案咨询

可以通过padding-left + text-indent的CSS技巧实现需求，兼容性覆盖绝大多数浏览器（包括你提到的Epiphany），且不会出现text-align-last的副作用。

实现原理 #

给容器设置较大的左内边距，同时给首行设置负的缩进值抵消内边距，让首行左对齐；剩余自动换行的内容受内边距影响，自然右对齐。

代码示例 #

HTML结构：

<div class="lyrics">
  这是一段很长很长的歌词内容，长到超出容器宽度会自动换行<br>
  这是短行，不会自动换行<br>
  又是一段需要自动换行的超长歌词内容，用来测试多换行的对齐效果
</div>

CSS样式：

.lyrics {
  width: 300px; /* 自定义容器宽度 */
  text-align: right; /* 整体文本右对齐，自动换行部分继承此属性 */
  padding-left: 100%; /* 设置足够大的左内边距，确保首行需要缩进抵消 */
  text-indent: -100%; /* 负缩进抵消左内边距，让首行左对齐 */
  line-height: 1.5; /* 优化行间距，可选 */
}

效果说明 #

• 当文本行无需自动换行时：首行通过负缩进抵消内边距，保持左对齐，不会像text-align-last那样变成右对齐。
• 当文本行超出容器宽度自动换行时：换行后的内容受左内边距限制，自然右对齐，首行保持左对齐。

内容的提问来源于stack exchange，提问作者localdevjs