知识问答

CSS限制文本字数宽度、行数、高度等代码

CSS限制文本字数宽度、行数、高度等代码,超出部分显示省略号。

超出200px宽度后显示省略号

.p{overflow:hidden;/*超出的部分隐藏起来。*/white-space:nowrap;/*不让文本换行,在一行显示*/text-overflow:ellipsis;/*超出显示省略号...支持IE*/width:200px;/*要显示文字的宽度,限制高度同理*/}

超出一行显示省略号

.p{overflow:hidden;/*超出的部分隐藏起来。*/white-space:nowrap;/*不让文本换行,在一行显示*/text-overflow:ellipsis;/*超出显示省略号...支持IE*/}

超出两行显示省略号

.p{overflow:hidden;/*超出的部分隐藏起来。*/text-overflow:ellipsis;/*超出显示省略号...*/display:-webkit-box;/*将对象作为弹性伸缩盒子模型显示*/-webkit-line-clamp:2;/*限制文本的行数,需要组合其他的WebKit属性*/-webkit-box-orient:vertical;/*设置盒子的子元素的排列方式*/}

说明:-webkit-是webkit内核的前缀(Chrome浏览器)

语法

text-overflow: clip|ellipsis|string|initial|inherit;

描述
clip剪切文本。
ellipsis显示省略符号...来代表被修剪的文本。
string使用给定的字符串来代表被修剪的文本。
initial设置为属性默认值。
inherit从父元素继承该属性值。