CSS 实现单行文本、多行文本溢出显示省略号

CSS 实现单行文本、多行文本溢出显示省略号

1. 单行文本

<input class='box' value='CSS 实现单行文本溢出显示CSS 实现单行文本溢出显示CSS 实现单行文本溢出显示CSS 实现单行文本溢出显示CSS 实现单行文本溢出显示CSS 实现单行文本溢出显示CSS 实现单行文本溢出显示CSS 实现单行文本溢出显示CSS 实现单行文本溢出显示' />
.box{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; width:200px;}

图片说明

2. 多行文本

.box{overflow:hidden; /*溢出隐藏*/
    display:-webkit-box; /*弹性盒子模型显示,将对象作为弹性伸缩盒子模型显示*/
	-webkit-box-orient:vertical; /*盒模型元素的排列方式,设置伸缩盒对象的子元素的排列方式*/
	-webkit-line-clamp:3;	/*限制块元素显示的文本行数,必须结合其他属性*/}
CSS 文章被收录于专栏

CSS

全部评论

相关推荐

gelmanspar...:奖学金删掉,自我评价删掉,简历压缩一下,写一页
如果再来一次,你还会学机...
点赞 评论 收藏
分享
StephenZ_:我9月份找的第一段实习也是遇到这种骗子公司了,问他后端有多少人和我说7个正职,进去一看只有一个后端剩下的都是产品前端算法(没错甚至还有算法)。还是某制造业中大厂,我离职的时候还阴阳怪气我
点赞 评论 收藏
分享
评论
1
收藏
分享

创作者周榜

更多
牛客网
牛客网在线编程
牛客网题解
牛客企业服务