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. spring二级缓存的ehcache 的 配置文件

    <ehcache> <!-- Sets the path to the directory where cache .data files are created. If the p ...

  2. 越狱Season 1-Episode 20: Tonight

    Season 1, Episode 20: Tonight -Pope: I want him under 24hour surveillance. surveillance: 监视 保证24小时监视 ...

  3. px em rem在WEB前端开发中的区别

    我们都知道基于像素的字体大小所用的单位是px,但是随着响应式设计的不断火热,基于相对字体大小的单位em变开始流行起来.当然,rem也在Web前端开发人员讨论如何更好设置字体大小的讨论话题之列.是不是需 ...

  4. Python路径总结

    Windows下文件路径的分隔符是'\'反斜杠,文件路径也是一个字符串,牵扯到'\'在Python字符串中存在转义的情况,就对这个问题做一个探究. Python字符串中要使用'\'时有两种方法: 使用 ...

  5. QAction类详解：

    先贴一段描述:Qt文档原文: Detailed Description The QAction class provides an abstract user interface action tha ...

  6. unity3D游戏开发之详解Animation类和Animator类

    详解Animator类和Animation类 链接: http://wenku.baidu.com/link?url=SiaUYcdrNYjOYrWVDJSKGAYdJOntMTOhsVJtyBk2i ...

  7. SQL Server中数据库文件的存放方式，文件和文件组

    原文地址:http://www.cnblogs.com/CareySon/archive/2011/12/26/2301597.html   SQL Server中数据库文件的存放方式,文件和文件组 ...

  8. js列表分页

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

  9. Android 如何全局获取Context

    有时,在处理业务逻辑的时候,需要Context对象,但在某些情况下,并非容易获取,这时就需要一些巧妙的手段来管理Context. 在Android中,提供了一个类Application,当应用程序启动 ...

  10. 《腾讯敏捷框架TAPD》研究

    1         框架结构 1.1         产品 TAPD采用FDD模式开发,FDD即特征驱动开发. FDD的核心是面向产品的功能点,但这个功能点是从客户角度出发的,并不是从系统角度出来的. ...