css 文字超出...

最新推荐文章于 2024-07-31 11:19:18 发布

周不凢

最新推荐文章于 2024-07-31 11:19:18 发布

阅读量2.4w

点赞数 5

分类专栏： CSS 文章标签： css 前端

本文链接：https://blog.csdn.net/qq_39047060/article/details/131660975

版权

CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1、单行文本超出

<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、多行文本超出

<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>