css 文字单行多行超出长度后显示 ...

不染-97322023-09-10 12:42

0.超出...

1、单行文本超出

javascript 复制代码

<div class="content">测试数据：css单行文本超出显示省略号--------</div>
 
<style>
.content{
  width: 200px;
  height: 200px;
 
  overflow:hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow:ellipsis;
}
</style>

2、多行文本超出

javascript 复制代码

<div class="content">测试数据：css多行文本超出长度显示省略号，如2行文本超出长度显示省略号----------------------</div>
 
<style>
.content{
  width: 200px;
  height: 200px;
 
  overflow:hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
</style>