北京网站推广优化,上海网站建设推荐案例,网站优化怎么做分录,桂林网站建设科技有限公司语法#xff1a; text-overflow:clip | ellipsis 默认值为clip 不显示省略标记 clip:当前对象内文本溢出时不显示省略标记,而是将溢出部分裁剪。 ellipsis:当对象内文本一处时显示省略标记(...)。 一、常见的单行文本溢出显示省略写法#xff1a; text-overflow: ellipsis; … 语法 text-overflow:clip | ellipsis 默认值为clip 不显示省略标记 clip:当前对象内文本溢出时不显示省略标记,而是将溢出部分裁剪。 ellipsis:当对象内文本一处时显示省略标记(...)。 一、常见的单行文本溢出显示省略写法 text-overflow: ellipsis; overflow: hidden; white-space: nowrap; !DOCTYPE html
htmlheadmeta charsetutf-8 /title/title/headstyle typetext/css.p{width: 100px;height: 40px;line-height: 40px;text-overflow: ellipsis; /*1*/overflow: hidden; /*2*/white-space: nowrap; /*3*/word-break: break-all;}/stylebodyp classp多行文本溢出显示多行文本溢出显示多行文本溢出显示/p/body
/html二、多行文本溢出
WebKit浏览器有一个-webkit-line-clamp的属性用这个即可以实现webkit内核的浏览器、以及大部分移动端的多行文本溢出省略号 display:-webkit-box; -webkit-line-clamp: 3/*第几行裁剪*/ -webkit-box-orient:vertical; !DOCTYPE html
htmlheadmeta charsetutf-8 /title/title/headstyle typetext/css.p {height: 60px;line-height: 30px;width: 80px;overflow : hidden;text-overflow: ellipsis;display: -webkit-box; /*1*/-webkit-line-clamp: 2; /*2*//*第几行裁剪*/-webkit-box-orient: vertical; /*3*/} /stylebodyp classp多行文本溢出显示多行文本溢出显示多行文本溢出显示多行文本溢出显示多示/p/body
/html其它浏览器的话就需要通过js实现
!DOCTYPE html
htmlheadmeta charsetutf-8 /title/title/headstyle typetext/cssdiv{height: 60px;}p {line-height: 30px;width: 80px;margin: 0 auto;}/stylebodydiv iddivp idp多行文本溢出显示多行文本溢出显示多行文本溢行文本溢示/p/div/bodyscript typetext/javascriptvar eleH document.getElementById(div).clientHeight;var pEle document.getElementById(p);while(pEle.clientHeight eleH) {pEle.innerText pEle.innerText.replace(/(\s)*([a-zA-Z0-9]|\W)(\.\.\.)?$/, ...);};/script
/html
