H5W3
当前位置:H5W3 > CSS3 > 正文

css文本内容超出显示省略号

1、单行文本超出:

p{
overflow: hidden;/*超出部分隐藏*/
text-overflow:ellipsis;/* 超出部分显示省略号 */
white-space: nowrap;/*规定段落中的文本不进行换行 */
width: 250px;/*需要配合宽度来使用*/
}

注:

text-overflow: clip|ellipsis|string;

clip:修剪文本。

ellipsis:显示省略符号来代表被修剪的文本。

string:使用给定的字符串来代表被修剪的文本。

2、多行文本超出:

p{ 
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  width: 250px;
}

注:

  1. -webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果,它需要组合其他的WebKit属性。常见结合属性:
  2. display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。
  3. -webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。
  4. 因为 -webkit-line-clamp 是一个不规范的属性,它没有出现在 CSS 规范草案中。也就是说只有 webkit 内核的浏览器才支持这个属性,像 Firefox, IE 浏览器统统都不支持这个属性,浏览器兼容性不好。

本文地址:H5W3 » css文本内容超出显示省略号

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址