欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
  CSS为HTML标记语言提供了一种样式描述,定义了其中元素的显示方式。下面我们来看一下css如何设置文本超出几行显示省略号。
 
  css设置超出几行显示省略号:
 
  1、单行文本
 
  使用text-overflow:ellipsis属性
 
  text-overflow: clip|ellipsis|string;
 
  clip:修剪文本。
 
  ellipsis:显示省略符号来代表被修剪的文本。
 
  string:使用给定的字符串来代表被修剪的文本。
 
  示例:
 
  css:
 
  p{
 
  overflow: hidden;/*超出部分隐藏*/
 
  text-overflow:ellipsis;/* 超出部分显示省略号 */
 
  white-space: nowrap;/*规定段落中的文本不进行换行 */
 
  width: 250px;/*需要配合宽度来使用*/
 
  border: 1px solid red;
 
  font-size: 30px;
 
  }
 
  html:
 
  <p>单行文本超出部分显示省略号我是mdzz</p>
 
  2、多行文本显示省略号,省略号在段尾
 
  p{
 
  display: -webkit-box;
 
  -webkit-box-orient: vertical;
 
  -webkit-line-clamp: 3;
 
  overflow: hidden;
 
  width: 250px;
 
  border: 1px solid red;
 
  font-size: 30px;
 
  }
 
  因使用了WebKit的CSS扩展属性,该方法适用于WebKit浏览器及移动端;
 
  注:
 
  -webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果,它需要组合其他的WebKit属性。
 
  常见结合属性:
 
  display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。
 
  -webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/html/h62832.shtml