CSS 左侧溢出实现

Posted on In 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<style>
  .container {
    width: 200px; /* 固定宽度，触发溢出 */
    overflow: hidden; /* 隐藏溢出内容 */
    white-space: nowrap; /* 禁止换行 */
  }

  .text {
    display: inline-block;
    width: 100%; /* 占满容器 */
    direction: rtl; /* 文本方向从右到左 */
    text-overflow: ellipsis; /* 显示省略号 */
    overflow: hidden;
    text-align: left; /* 强制左对齐，保持视觉上的正常阅读方向 */
  }
</style>
<div class="container">
  <span class="text">短文本不会被省略</span>
</div>

<div class="container">
  <span class="text">这是一段很长的文本，左侧会被省略</span>
</div>