如何实现多行右对齐文本的左侧边框紧贴文本起始位置？

可以通过父容器右对齐 + 内联块级元素包裹文本并添加左侧边框的组合方式实现需求，具体代码如下：

HTML结构 #

<div class="container">
  <span class="text-box">这是一段右对齐的文本，左侧边框从文本起始处开始</span>
</div>

CSS样式 #

.container {
  text-align: right; /* 父容器设置右对齐，让内部元素整体靠右 */
  width: 100%; /* 可根据需求调整容器宽度，比如占满父元素 */
}

.text-box {
  display: inline-block; /* 让元素仅包裹文本内容，不会撑满容器宽度 */
  border-left: 2px solid #000; /* 添加左侧边框 */
  padding-left: 8px; /* 边框与文本间留间距，可选设置 */
}

效果说明 #

• 父容器的text-align: right会让内部的inline-block元素整体靠右对齐
• inline-block类型的text-box仅包裹自身文本内容，因此左侧边框会紧贴文本起始位置，完全符合期望效果：

  | 这是一段右对齐的文本，左侧边框从文本起始处开始
  

之前问题的原因解析 #

1. 直接使用span：默认是inline元素，边框无法正确包裹多行文本，因为inline元素的上下边框基于行高而非内容块
2. 给span设置inline-block但未设置父容器右对齐：此时span默认左对齐，边框会从容器左侧开始
3. 使用div/p标签：默认是block元素，会撑满容器宽度，左侧边框自然从容器左侧开始

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