1.给DIV设置属性：width: 200px; text-overflow: ellipsis; overflow: hidden; 当div里面的内容总宽度找过 200PX的时候，超出的部分会以“...”的形式显示。

2.上面那个案例之适用于单行文本的现实，才会有效。但当div里面的内容出现多行的时候则不能达到预期的效果。下面是解决多行的时候显示“...”的方案。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>

    <script type="text/javascript">

    $(function () {

        $(".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>

    <style>

        .figcaption

        {

            background: #EEE;

            width: 410px;

            height: 3em;

            margin: 1em;

        }

        .figcaption p

        {

            margin: 0;

            line-height: 1.5em;

        }

    </style>

</head>

<body>

    <div class="figcaption">

        <p>

            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.</p>

    </div>

</body>

</html>

div里面的内容超出自身高度时，显示省略号的更多相关文章

  1. CSS文字超出div或者span时显示省略号

    我们常常需要在文本过长时显示,将超出显示成省略号: 思想为: 首先设置宽度,然后让超出的部分隐藏如果有超出则在最后显示省略号让文本不换行 具体css代码为: .title{ width:200px;o ...

  2. 当div元素内的内容超出其宽度时，自动隐藏超出的内容

    word-break:keep-all;/* 不换行 */ white-space:nowrap;/* 不换行 */ overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */ te ...

  3. Div内部的内容超出部分显示省略号（仅仅只有一行内容）

    效果如下:

  4. css 控制文字超出时显示省略号

    不多说,直接看代码吧: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...

  5. HTML技巧篇：如何让单行文本以及多行文本溢出时显示省略号(…)

    参考:https://baijiahao.baidu.com/s?id=1621362934713048315&wfr=spider&for=pc 本篇文章主要给大家介绍一下在html ...

  6. 限制div高度当内容多了溢出时显示滚动条

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type"content= ...

  7. 页面内容不满屏幕高度时，footer底部显示

    底部高度固定的情况下 <style> body,html{ height: 100%; margin: 0; } .content{ min-height: 100%; padding-b ...

  8. div、span内容超出省略号

    span设置部分省略...: span{         overflow: hidden;         text-overflow: ellipsis;         -o-text-over ...

  9. css多行超出时，超出高度，显示省略号

    .layout display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;

随机推荐

  1. UVa 489 刽子手游戏

    游戏规则,计算机想一个单词让你猜,你每次可以猜一个字母,如果单词里有那个字母,所有该字母都会显示出来,如果没有那个字母则计算机会在一副"刽子手"画上填一笔,这幅画一共需要7笔就能完 ...

  2. hdu1213 并查集

    题意:有 n 个朋友,他们可能相互认识,A 认识 B,B 认识 C,则 ABC 相互认识,现在给出他们的认识情况,相互认识的人坐一桌,否则需要分开坐,问至少需要多少桌. 其实就是问并查集的个数,在初始 ...

  3. 黑马程序员——JAVA基础之简述集合collection

    ------- android培训.java培训.期待与您交流! ---------- 集合: 为什么出现集合类? •  面向对象语言对事物的体现都是以对象的形式,所以为了方便对多个对象的操作,就对对 ...

  4. InputStreamReader/OutputStreamWriter乱码问题解决

    /* *InputStreamReader参数charset要跟文件编码格式一致. InputStreamReader读的时候才不会乱码. *OutputStreamWriter参数charset设置 ...

  5. ADS1110/ADS1271

    ADS1110 1.初始化 软件:设置p任意2个为GPIO口 硬件:设置p0.2,p0.3为SDA,SCL 输入.输出 ADS1110的I2C地址(1001aaa)例如ADS1110A0的地址是100 ...

  6. C# 正则表达式类 Match类和Group类

    @"\b(\S+)://(\S+)\b"; //匹配URL的模式foreach (Match match in mc){ Console.WriteLine(match.Value ...

  7. Python_day8_面向对象（多态、成员修饰符、类中特殊方法、对象边缘知识）、异常处理之篇

    一.面向对象之多态 1.多态:简而言子就是多种形态或多种类型 python中不支持多态也用不到多态,多态的概念是应用与java/C#中指定传参的数据类型, java多态传参:必须是传参数的数据类型或传 ...

  8. Discuz 3.X 整合 CAS 的方法

    1,新建 CasClient.php <?php include_once (dirname ( __FILE__ ) . '/CasClientConfig.php'); // 注意这个 in ...

  9. wikioi 1012最大公约数和最小公倍数【根据最大公约数和最小公倍数求原来的两个数a、b】

    /*====================================================================== 题目描述 输入二个正整数x0,y0(2<=x0& ...

  10. python简单粗暴多进程之concurrent.futures

    python在前面写过多线程的库threading: python3多线程趣味详解 但是今天发现一个封装得更加简单暴力的多进程库concurrent.futures: # !/usr/bin/pyth ...