CSS控制多行文本省略--显示省略号

最新推荐文章于 2024-06-05 17:20:00 发布

OGoodness

最新推荐文章于 2024-06-05 17:20:00 发布

阅读量600

点赞数 1

分类专栏： HTML CSS 文章标签： html html5 css css3

本文链接：https://blog.csdn.net/qq_46275230/article/details/123614954

版权

HTML CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

CSS控制多行文本省略–显示省略号

文章目录

- CSS控制多行文本省略--显示省略号
- - 单行文本省略
  - 控制多行文本省略

初始化一个盒子

<body>
  <div class="box">
    这是一首简单的小情歌,这是一首简单的小情歌,这是一首简单的小情歌
  </div>
</body>
/**/
<style>
    .box {
      width: 200px;
      border: 2px solid seagreen;
    }
</style>

请添加图片描述

单行文本省略

<body>
  <div class="box">
    这是一首简单的小情歌,这是一首简单的小情歌,这是一首简单的小情歌
  </div>
</body>
/**/
<style>
    .box {
      width: 200px;
      border: 2px solid seagreen;
      
      /*关键代码*/
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  </style>

请添加图片描述

控制多行文本省略

<div class="box">
    这是一首简单的小情歌,这是一首简单的小情歌,这是一首简单的小情歌
</div>
 /**/
<style>
    .box {
      width: 200px;
      border: 2px solid seagreen;
	  
	  /*关键代码*/
      display: -webkit-box;
      overflow: hidden;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2; /*自行设定:控制在第几行结尾进行显示*/
    }
  </style>

请添加图片描述

OGoodness

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS控制多行文本省略--显示省略号

CSS控制多行文本省略–显示省略号文章目录CSS控制多行文本省略--显示省略号单行文本省略控制多行文本省略初始化一个盒子<body> <div class="box"> 这是一首简单的小情歌,这是一首简单的小情歌,这是一首简单的小情歌 </div></body>/**/<style> .box { width: 200px; border: 2px solid seagreen;
复制链接

扫一扫