Html
    Css
    Js

    
                        
.box {
	width:300px;
	height:20px;
	padding:10px;
	border:1px solid #424242;
	line-height:24px
}
.aa {
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}
.bb {
	height:65px;
	overflow:hidden;
	display:-webkit-box;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:3;
	overflow:hidden;
}
.ellips {
	position:relative;
	width:100px;
	height:60px;
	line-height:20px;
	overflow:hidden;
	background:#fff
}
.ellips .dot {
	position:absolute;
	right:0px;
	bottom:0px;
	height:20px;
	background:#fff
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

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

单行Css实现方法:

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

多行Css实现方法1:

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

多行Css实现方法2:

.ellips{position:relative;width:100px;height:60px;line-height:20px;overflow:hidden;background:#fff}
.ellips .dot{position:absolute;right:0px;bottom:0px;height:20px;background:#fff}
1
      张大臀0
      2017/3/25 15:14:49

      这个不错 以前遇到过 好不容易写出来 效果很不好

      回复