html - 如何正确对齐跨度以及溢出时显示省略号？

Question

我有以下情况:

但我想做的是在我的容器右侧对齐，如果文本溢出他的容器，则显示省略号，而不是现在从左对齐。

我的期望:

              AAA
BBBBBBBBBBBBBB...
              CCC

如果第一行或第三行包含更多字符:

AAAAAAAAAAAAAA...
BBBBBBBBBBBBBB...
              CCC

Answer 1

你可以这样做:

CSS

.box {
  display: inline-block;
}

p {
  width: 80px;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: right;
}

HTML

<div class="box">
  <p>AAAAAAAAAAAAAA</p>
  <p>BBBBBBBBBBBBBB</p>
  <p>CCC</p>
</div>

DEMO HERE