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. [hdu 3605]Escape

    这题的做法非常直观,却又非常不直观 先容许我吐一下槽吧~作者你的英语是读到火星上去了喵? 题目大体是说人类要移民,然后有 n 个人, m 个星球 每个人都有 m 个 0 . 1 数码表示他能否移民到该 ...

  2. java的nio之：java的nio系列教程之pipe

    Java NIO 管道是2个线程之间的单向数据连接.Pipe有一个source通道和一个sink通道.数据会被写到sink通道,从source通道读取. 这里是Pipe原理的图示:

  3. centos 6.4/redhat 6.4 安装gitlab

    一,把所有包升级到最新版本 yum -y upgrade 二,安装最新版ruby 2.1.5 步骤http://my.oschina.net/duolus/blog/348353 三,安装官方给出的o ...

  4. sersync2 实时同步配置

    在同步服务器上开启sersync,将监控路径中的文件同步到目标服务器,因此需要在同步服务器配置sersync,在同步目标服务器配置rsync. 一.同步目标服务器配置rsync # rpm -qa | ...

  5. APK软件反编译 去广告

    具体步骤: 1.下载 apktool 下载地址:https://code.google.com/p/android-apktool/downloads/list 2.通过apktool 反编译apk. ...

  6. understanding checkpoint_completion_target

    Starting new blog series – explanation of various configuration parameters. I will of course follow ...

  7. 怎么让OCR文字识别软件转换别的语言文档

    ABBYY PDF Transformer+让您可创建或转换希伯来语.意第绪语.日语.中文.泰语.韩语和阿拉伯语的文档.那么如何顺利使用这些复杂语言文字呢?小编教你两步骤轻松快速处理包含以下复杂语言文 ...

  8. linux概念之内存分析

    linux内存总结 分析样本[root@-comecs ~]# free total used free shared buffers cached Mem: -/+ buffers/cache: S ...

  9. TaffyDB：开源JavaScript数据库

    你是否曾经注意到javascript的对象有点像数据库中的记录,你把很多javascript对象包装到一起时就像是你在处理一个数据库中的表,TaffyDB是一个Javascript库,它提供了强大的数 ...

  10. ant导入Zookeeper到Eclipse错误path contains invalid character

    首先在Zookeeper源码目录执行 ant eclipse 遇到错误 path contains invalid character 可以修改\zookeeper\build.xml 文件加入 &l ...