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. 利用URLScan工具过滤URL中的特殊字符（仅针对IIS6）-- 解决IIS短文件名漏洞

    IIS短文件名漏洞在windows服务器上面非常常见,也就是利用“~”字符猜解暴露短文件/文件夹名,比如,采用这种方式构造URL:http://aaa.com/abc~1/.aspx,根据IIS返回的 ...

  2. C函数及指针学习1

    1 大段程序注释的方法 #if 0#endif 2三字母词 以两个问号 开始的都要注意 3 字面值(常量) 在整型号字面值后加 字符L (long),U(unsigned)说明字符常量 为长整型 或( ...

  3. c#部分---需要实例化的内容；

    需要初始化的: 随机数类:初始化 实例化//不允许将初始化的语句放置在循环中//Random ran = new Random(); 时间值类:/初始化 实例化//DateTime dt = new ...

  4. leetcode 112 Path Sum ----- java

    Given a binary tree and a sum, determine if the tree has a root-to-leaf path such that adding up all ...

  5. poj1511 最短路

    题意:与poj3268一样,所有人需要从各点到一点再从一点到各点,求最短路总和. 与poj3268一样,先正向建图跑 dijkstra ,得到该点到其他所有各点的最短路,即这些人回去的最短路,再用反向 ...

  6. SpringMVC给外部资源加版本号避免缓存

    一.属性文件:version.properties ->内容:version=201608  二.java代码 public class configVersion implements Ser ...

  7. ABBYY把pdf转换成word的方法

    有时候我们在网上下载的资料文献是PDF格式文档,遇到喜欢的字句总忍不住想要收藏起来,但是PDF文档不同于普通的Word文档可以直接进行复制粘贴,需要下载安装相关的编辑工具,才能对文字内容进行编辑.倒不 ...

  8. Oracle数据库——体系结构

    一.涉及内容 1.了解数据库的物理存储结构和逻辑存储结构 二.具体操作 1.分别使用SQL 命令和OEM 图形化工具查看本地数据库的物理文件,并使用OEM 工具在现有的users 表空间中添加user ...

  9. linux包之coreutils之du和df命令

    [root@localhost ~]# rpm -qf /usr/bin/ducoreutils-8.4-31.el6.x86_64[root@localhost ~]# rpm -qf /bin/d ...

  10. 7 款开源 Java 反编译工具

    今天我们要来分享一些关于Java的反编译工具,反编译听起来是一个非常高上大的技术词汇,通俗的说,反编译是一个对目标可执行程序进行逆向分析,从而得到原始代码的过程.尤其是像.NET.Java这样的运行在 ...