webkit-line-clamp：文本对齐：右；打破文本溢出：省略号；

Question

我的目标是：

1. 限制文本行数
2. 文本应该右对齐
3. 文本溢出：3 点

text-align: right;当我添加到样式时，问题就开始了：3 个点的行为与没有text-align样式属性时不同：通常，3 个点位于文本容器之外（灰色）。

比较“好”与“坏”风格；唯一的区别：“good”不包含text-align: right;样式属性。尝试使用这些样式中的字体大小，您会发现对于“好”样式，3 个点始终位于文本容器内（灰色背景），而对于“坏”样式，3 个点的位置是意外的（可能在内部）容器，或部分在里面，或完全在外面）

那么，是否有机会像“好”样式一样实现 3 点行为，但同时使文本正确对齐？考虑行数限制。

* {
  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;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 2;
           line-clamp: 2; 
   -webkit-box-orient: vertical;
}

.bad {
  font-size: 20px;
  text-align: right;
  background-color: grey;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 2;
           line-clamp: 2; 
   -webkit-box-orient: vertical;
}

<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>Bad</h2>
    <p class="bad">Hello, I'm a very long text for at least three lines!</p>
  </div>


</section>

Answer 1

• 您必须使用 来设置浏览器来改变方向direction: rtl;。
• 因此text-align:right，按照预期的行为，点也会出现在右侧。

* {
  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;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

.bad {
  font-size: 20px;
  text-align: right;
  background-color: grey;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  direction: rtl;
}

<h1> IN that case to bring ... to right you have to set <em>direction: rtl;</em></h1>
<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>Bad</h2>
    <p class="bad">Hello, I'm a very long text for at least three lines!</p>
  </div>


</section>