如何对齐跨度和溢出时显示省略号？

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

Answer 2

使用纯CSS，添加以下内容：

 text-align:right;
 overflow: hidden;
 text-overflow: ellipsis;

text-align:right;将您的文字与右侧对齐。

overflow: hidden;加上text-overflow: ellipsis;会使文字溢出并被省略号替换。

Working example