怎么让多余的文字不显示或者以省略号显示

目录

在文字后面加省略号

在文字前面加省略号

---

<div class="title">
    <span>第八批在韩志愿军烈士安葬仪式</span>
</div>

• 在文字后面加省略号

一行内多余的文字不显示：

.title {
  width: 100px;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:clip;
  -o-text-overflow:clip;
}

一行内多余的文字以省略号显示：

.title {
  width: 100px;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  -o-text-overflow:ellipsis;
}

  

如果不是一行，而是多行，则把white-space:nowrap;改为display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;

比如：2行内多余的文字以省略号显示

 .title {
    width: 100px;  
    overflow:hidden;
    text-overflow:ellipsis;
    -o-text-overflow:ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* 这里设定行数 */
    -webkit-box-orient: vertical;
 }

• 在文字前面加省略号

加上

 direction: rtl;