标签：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
<meta name="author" content="www.frebsite.nl" />
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" language="javascript" src="src/js/jquery.dotdotdot.js"></script> <!--jQuery插件-jQuery.dotdotdot-->
/*firfox下js实现该效果显示的行数由文本容器的height决定*/
<script type="text/javascript" language="javascript">
$(function() {
$(‘#dot1‘).dotdotdot();
});
</script>
<style type="text/css">
#dot1{
width: 200px;
height: 100px;
}
/*移动web端和chrome浏览器下代码可以直接写出效果但是firfox下不支持*/
#dot1{
display:-webkit-box;
overflow:hidden;
text-overflow:ellipsis;
word-break:break-all;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
}
</style>
</head>
<body>
<div id="dot1">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry‘s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</div>
</div>
</body>
</html>
当设置文本超出隐藏后，当我们不设置任何字体时chrome浏览器下省略号显示在文本最后的上方，只有当我们设置字体为微软雅黑和一些别的字体时省略号才会在下方，宋体会显示在上方。firfox浏览器下单行文本省略显示正常。
标签：
原文地址：http://my.oschina.net/CodingPeasant/blog/515807
