廢話不說直接上代碼啦，
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>example</title>
<script src="jquery.min.js"></script>
<style>
.figcaption{
background: #EEE;
/*可不設置寬*/
width: 410px;
height: 48px;
margin: 16px;
}
.figcaption p{
margin: 0;
line-height: 24px;
}
/*行高是高的一半*/
</style>
</head>
<body>
<div id="app">
<div class="figcaption">
<p>
<!-- You probably can't d行高是高的一半行高是高的一半行高是高的一半o it (currently?) without a fixed-width font like Courier. With
a fixed-wi行高是高的一半dth font eve行高是高的一半ry letter occupies the sa行高是高的一半me horizontal space, so you could
probably count the letters 行高是高的一半and multiply the result with the current font size in
ems or exs. Then you would ju行高是高的一半st have to test how ma行高是高的一半ny letters fit on one 行高是高的一半line, and
then break 行高是高的一半it up. -->
<!-- You probably can't do it (currently?) without a fixed-width font like Courier. With
a fixed-width font every letter occupies the same horizontal space, so you could
probably count the letters and multiply the result with the current font size in
ems or exs. Then you would just have to test how many letters fit on one line, and
then break it up.You probably can't do it (currently?) without a fixed-width font like Courier. With
a fixed-width font every letter occupies the same horizontal space, so you could
probably count the letters and multiply the result with the current font size in
ems or exs. Then you would just have to test how many letters fit on one line, and
then break it up.You probably can't do it (currently?) without a fixed-width font like Courier. With
a fixed-width font every letter occupies the same horizontal space, so you could
probably count the letters and multiply the result with the current font size in
ems or exs. Then you would just have to test how many letters fit on one line, and
then break it up. -->
You probably can't d行高是高的一半行高是高的一半行高是高的一半123345667890,./;'[]!~@#$%^&*()_+?><:""::''{}
</p>
</div>
</div>
<script>
$(".figcaption").each(function (i) {
var divH = $(this).height();
var $p = $("p", $(this)).eq(0);
while ($p.outerHeight() > divH) {
$p.text($p.text().replace(/(\s)*([a-zA-Z0-9]+|\W)(\.\.\.)?$/, "..."));
};
});
</script>
</body>
</html>
通過js控制，兼容所有瀏覽器，重點在於height與line-height的關係（倍數）