欢迎光临
我们一直在努力

CSS | 文本溢出用省略号代替

写新闻列表的时候,可能新闻题目很长,导致页面很不好看,因此需要学习文本溢出用省略号代替,使内容更加友好。

单行文本设置

在为单行文本设置溢出用省略号代替时,必须要做下面四条:

  • 设置width 定义文本长度
  • 设置overflow: hidden;使超出部分隐藏
  • 设置text-overflow:ellipsis;使超出部分用省略号代替
  • 设置white-space: nowrap;强制文本不能换行

为一段文字设置宽度,并使超出部分隐藏:

<style type="text/css">
	p{
		width: 200px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
</style>
<p>这是一句话,很长很长的话,这么长够长了吧!</p>

实验结果如下:

多行文本设置

实现方法:

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

效果如图:

dome2

适用范围:

因使用了WebKit的CSS扩展属性,该方法适用于WebKit浏览器及移动端;

备注:

  1. -webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果,它需要组合其他的WebKit属性。常见结合属性:
  2. display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。
  3. -webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。
赞(2) 打赏
未经允许不得转载:散人研 » CSS | 文本溢出用省略号代替
分享到: 更多 (0)

评论 抢沙发

6 + 3 =
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏