如何实现双文本自适应对齐：同行时B右对齐，换行后B左对齐

我们需要实现这样的布局逻辑：当文本A与文本B能在同一行显示时，文本B靠右对齐；当容器空间不足导致文本B换行至下一行时，文本B自动靠左对齐。

实现代码 #

CSS 样式

.text-left {
  float: left;
  /* 文本A左浮动 */
}

.text-right {
  float: right;
  /* 文本B右浮动 */
}

HTML 结构

<h1>Flexible Boxes</h1>

<div class="text-wrapper">
  <span class="text-left">abcfdsdfgdfgfdgfrd</span>
  <span class="text-right">xyzdsffdgdfgdfgds</span>
</div>

效果说明 #

• 当容器宽度足够容纳两个文本元素时，text-left左浮动、text-right右浮动的特性会让两者分别在同一行的左右两端显示
• 当容器宽度缩小到无法同时容纳两个元素时，右浮动的文本B会自动换行到下一行，此时它会靠左对齐，符合换行后的布局要求

效果示意 #

两种状态展示：

1. 宽度充足状态：文本A居左，文本B居右，处于同一行
2. 宽度不足状态：文本B换行至下一行，与文本A保持左对齐

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