转载

css实现多行文本溢出显示省略号

上代码

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <style>
	*{margin:0;padding:0;}
	.textOverflow{
		margin: 20px auto;
		width: 200px;
		border: 1px solid red;
		word-break: break-all;		   /** word-break 属性规定自动换行的处理方法,允许在单词内换行 **/
		text-overflow: ellipsis;       /** 文字超出显示省略号 **/
		display: -webkit-box;          /** 对象作为伸缩盒子模型显示 **/
		-webkit-box-orient: vertical;  /** 设置或检索伸缩盒对象的子元素的排列方式 **/
		-webkit-line-clamp: 2;         /** 显示的行数 **/
		overflow: hidden;              /** 隐藏超出的内容 **/
    }   
  </style>
 </head>
 <body>
  <div class="textOverflow">
	word-break 属性规定自动换行的处理方法,允许在单词内换行
  </div>
 </body>
</html>

效果:
在这里插入图片描述

概括:
word-break 属性规定自动换行的处理方法

  1. normal 使用浏览器默认的换行规则
  2. break-all 允许在单词内换行
  3. keep-all 只能在半角空格或连字符处换行

box-orient:horizontal | vertical | inline-axis | block-axis

  • horizontal: 设置弹性盒对象的子元素从左到右水平排列
  • vertical: 设置弹性盒对象的子元素从上到下纵向排列
  • inline-axis: 设置弹性盒对象的子元素沿行轴排列
  • block-axis: 设置弹性盒对象的子元素沿块轴排列

-webkit-line-clamp是webkit的私有属性,是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中

-webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果,它需要组合其他的WebKit属性。常见结合属性:

  • display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。

  • -webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式

正文到此结束
本文目录