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

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>

CSS控制多行文本省略--显示省略号相关推荐

css实现多行文本溢出显示省略号(…)全攻略
省略号在ie中可以使用text-overflow:ellipsis了,但有很多的浏览器都需要固定宽度了,同时ff这些浏览器并不支持text-overflow:ellipsis设置了,下文来给各位整理一 ...
纯CSS实现多行文本溢出显示省略号（兼容不同浏览器）
1.单行文本溢出显示省略号单行文本溢出显示省略号比较简单,设置white-space: nowrap避免换行,再设置text-overflow: ellipse即可. <style>.s ...
css中多行文本溢出显示省略号的方法
下面这几行代码可以直接复制到css样式中,实现溢出显示省略号的效果 overflow: hidden; //首先固定宽高,然后让溢出的文字隐藏 text-overflow: ellipsis; dis ...
css实现多行文本时显示省略号
1.效果效果图如下,系统首页新闻部分,要求只显示摘要部分的前三行数据,多余的数据省略. 2.HTML代码红框内为从数据库查询出来的新闻摘要信息 3.CSS代码主要代码如下: .core-text ...
CSS单行/多行文本溢出显示省略号(...)
1.单行文本CSS设置: { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } 2.多行文本CSS设置: { over ...
CSS控制文字，超出部分显示省略号
http://www.xinyouw.org/mianfeiziyuan/thread-162848-1-1.html 实现方法: overflow: hidden; text-overflow:el ...
CSS基础：单行和多行文本溢出显示省略号
文本溢出后很多,会显示一些省略号,这个在很多网站都会这样做,从技术层次来分析有两种,一种是前端通过css或者JavaScript进行进行,还有一种是后端传递文字的时候,本身处理完长度,然后返回一个嗲有 ...
CSS单行文本以及多行文本溢出显示省略号解决方案
CSS单行文本以及多行文本显示省略号解决方案文章目录 CSS单行文本以及多行文本显示省略号解决方案单行文本溢出显示省略号多行文本溢出显示省略号第一种效果:仅显示3行文本溢出部分显示省略号第二 ...
css多行超出显示点_CSS实现单行、多行文本溢出显示省略号（…）
如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方法: overflow: hidden; te ...
css多行文本溢出显示省略号(…)
text-overflow:ellipsis属性可以实现单行文本的溢出显示省略号(-).但部分浏览器还需要加宽度width属性. css代码: overflow: hidden; text-overf ...

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

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

文章目录

单行文本省略

控制多行文本省略

CSS控制多行文本省略--显示省略号相关推荐

最新文章

热门文章