css 文字展示两行其余的省略号显示

<!DOCTYPE html>

<html>

<head>

<title>Document</title>

</head>

<style>

.comment_inner{

200px;

word-break: break-all;

text-overflow: ellipsis;

display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/

-webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/

-webkit-line-clamp: 3; /** 显示的行数 **/

overflow: hidden; /** 隐藏超出的内容 **/

}

</style>

<body>

<div>

<p>

word-break 属性规定自动换行的处理方法。normal(使用浏览器默认的换行规则。),break-all(允许在单词内换行。),keep-all(只能在半角空格或连字符处换行。)

</p>

</div>

</body>

</html>

一般常用一行的。

1.overflow:hidden;
2.text-overflow:ellipsis;
3.-o-text-overflow:ellipsis;
4.white-space:nowrap;
5.100%;
其中，overflow: hidden和white-space: nowrap都是必须的否则不会显示省略号；-o-text-overflow: ellipsis针对Opera；而宽度的设定主要是针对IE6；
该方法支持Internet Explorer, Safari, Chrome 和 Opera，但FF并不支持，不过可以通过Jquery来实现类似的效果。

css 文字展示两行 其余的省略号显示

css 文字展示两行其余的省略号显示