对单行文本指定宽度，超出宽度的文本隐藏（用…替代）

来源：互联网发布：淘宝捡漏qq群编辑：程序博客网时间：2024/05/16 11:19

<!DOCTYPE HTML>

<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style>
.warp{
   width:300px;
   font-size:15px;
   word-break:keep-all;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis; /* for IE*/
   -moz-text-overflow: ellipsis; /* for Firefox,mozilla */
}
</style>
</head>
<body>

<div class="warp">登鹳雀楼（李白）白日依山尽，黄河入海流。欲穷千里目，更上一层楼。两只黄鹂鸣翠柳，一行白鹭上青天。迟日江山丽，春分花草香泥融飞燕子，沙暖睡鸳鸯。</div>
</body>

</html>

备注：用CSS控制div宽度对超出长度的文本做隐藏的效果只对单行超长文本有效。

如果是多行文本，且每行文字都不超出div中设定的宽度，就要用jQuery截取指定长度的字符串

超出部分用…替换。详情见：jQuery截取指定长度字符串超出部分省略代码.

0 0