多行文本溢出顯示省略符號(…)全攻略

標籤：

<!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-->

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瀏覽器下單行文本省略顯示正常。

多行文本溢出顯示省略符號(…)全攻略