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. hilbert矩阵 分类： 数学 2015-07-31 23:03 2人阅读 评论(0) 收藏

    希尔伯特矩阵 希尔伯特矩阵是一种数学变换矩阵 Hilbert matrix,矩阵的一种,其元素A(i,j)=1/(i+j-1),i,j分别为其行标和列标. 即: [1,1/2,1/3,--,1/n] ...

  2. 关于获取目录的N种方法 的汇总

    前段时间在Global.asax.cs中的Session_End中使用Server.MapPath() 出现"服务器操作在此上下文中不可用"异常. 网络上给出的解决方案:Syste ...

  3. ImageOptim 图片压缩工具

    下载地址:http://www.onlinedown.net/soft/175501.htm 下载地址(官网):http://imageoptim.com ​ ImageOptim 图片压缩工具,能够 ...

  4. scala言语基础学习

    scala变长参数: 递归累加: scala异常的使用: array和arraybuffer的使用 定长array: arraybuff:

  5. hihoCoder #1127:二分图最小点覆盖和最大独立集

    题目大意:求二分图最小点覆盖和最大独立集. 题目分析:如果选中一个点,那么与这个点相连的所有边都被覆盖,使所有边都被覆盖的最小点集称为最小点覆盖,它等于最大匹配:任意两个点之间都没有边相连的最大点集称 ...

  6. POJ-1741 Tree （树上点分治）

    题目大意:一棵带边权无根树,边权代表距离,求距离小于等于k的点对儿数. 题目分析:这两个点之间的路径只有两种可能,要么经过根节点,要么在一棵子树内.定义depth(i)表示点 i 到根节点的距离,be ...

  7. 越狱Season 1- Episode 16

    Season 1, Episode 16 -Burrows:Don't be. It's not your fault. 不要,不是你的错 -Fernando: Know what I like? 知 ...

  8. js动态生成数据列表

    我们通常会使用table标签来展示数据内容,由于需要展示的数据内容是随时更换的,所以不可能将展示的数据列表写死在html写死在页面中,而是需要我们根据后台传来的数据随时更换,这个时候就需要我们使用js ...

  9. word2010插入奇数页 使奇偶页不同的问题

    word2010版本,设计奇偶页不同时,遇到一个问题,就是在第一章最后插入分节符——奇数页时,会导致整个奇数页都为1.原因:①首先每一章的末尾都应该有分页符或者奇数页等分节符来分开每一章:②点击页码可 ...

  10. JavaScript的事件绑定及深入

     事件绑定分为两种:一种是传统事件绑定(内联模型,脚本模型),一种是现代事件绑定 (DOM2 级模型).现代事件绑定在传统绑定上提供了更强大更方便的功能. 一．传统事件绑定的问题传统事件绑定有内联模型 ...