如何实现右对齐文本的多行溢出省略且省略号正常显示？

问题背景 #

需求明确：

• 文本最多显示2行
• 整体右对齐
• 内容超出时自动显示省略号

但给文本添加text-align: right;后，省略号会跑到灰色容器外面——对比「good」（无右对齐）和「bad」（加右对齐）的效果就能看出，右对齐时省略号位置异常，要么部分溢出要么完全跑出容器。

可行解决方案 #

方法1：嵌套元素拆分职责 #

把右对齐和多行省略的样式拆分给不同元素：外层负责右对齐，内层处理行数限制和省略号逻辑。

修改后的代码：

CSS

* {
  box-sizing: border-box;
}

body {
  height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #78b9f3;
  margin:0;
  font-family: "Arial";
}

.wrapper {
  display: flex;
  justify-content: center;
}

.card {
  background: #fff;
  box-shadow: 0 4px 24px 3px rgb(0 0 0 / 10%);
  padding: 20px;
  margin: 20px;
  width: 200px;
  height: auto;
  border-radius: 6px;
}

p {
  font-size: 1em;
  line-height: 1.3em;
  margin:0;
}

h2 {
  font-size: 1.5em;
  margin: 0 0 0.5em 0;
}

.good {
  font-size: 20px;
  background-color: grey;
  overflow: hidden; /* 补上必须的溢出隐藏属性 */
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2; 
  -webkit-box-orient: vertical;
}

.fixed {
  font-size: 20px;
  background-color: grey;
  text-align: right; /* 外层负责右对齐 */
}

.fixed-inner {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical; /* 内层处理多行省略 */
}

HTML

<section class="wrapper">
  <div class="card">
    <h2>Good</h2>
    <p class="good">Hello, I'm a very long text for at least three lines!</p>
  </div>
  <div class="card">
    <h2>Fixed</h2>
    <p class="fixed">
      <span class="fixed-inner">Hello, I'm a very long text for at least three lines!</span>
    </p>
  </div>
</section>

方法2：调整文字方向绕过bug #

利用direction属性让浏览器重新计算省略号位置：容器设为从右到左排版，文本内容再改回从左到右，既保持右对齐视觉效果，又能让省略号乖乖待在容器内。

CSS

/* 其他样式和方法1一致，仅修改.fixed类 */
.fixed {
  font-size: 20px;
  background-color: grey;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  direction: rtl; /* 容器设为从右到左排版 */
}

.fixed > span {
  direction: ltr; /* 文本内容恢复从左到右 */
  display: inline-block;
}

HTML

<p class="fixed"><span>Hello, I'm a very long text for at least three lines!</span></p>

问题根源 #

1. 原代码遗漏overflow: hidden属性——这是text-overflow生效的必要条件，左对齐时碰巧表现正常，但属于不规范写法；
2. WebKit内核浏览器在同时处理text-align: right和-webkit-line-clamp时，存在布局计算bug，导致省略号位置被错误偏移。

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