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. MySQL性能参数详解 - max_connect_errors

    max_connect_errors是一个MySQL中与安全有关的计数器值,它负责阻止过多尝试失败的客户端以防止暴力破解密码的情况.max_connect_errors的值与性能并无太大关系. 默认情 ...

  2. Sublime Text3快捷方式与使用技巧

    Sublime Text 3 快捷键精华版 Ctrl+Shift+P:  打开命令面板Ctrl+P:  搜索项目中的文件Ctrl+G: 跳转到第几行Ctrl+W: 关闭当前打开文件Ctrl+Shift ...

  3. Java 标准日志工具 Log4j 的使用（附源代码）

    源代码下载 Log4j 是事实上的 Java 标准日志工具.会不会用 Log4j 在一定程度上可以说是衡量一个开发人员是否是一位合格的 Java 程序员的标准.如果你是一名 Java 程序员,如果你还 ...

  4. StackTrace，Trim

    一: Environment.StackTrace 可能我们看到最多的就是catch中的e参数,里面会有一个StackTrace,然后不可否认的这玩意太有用了,它会把调用堆栈 中的信息输出出来,有了它 ...

  5. ABBYY FineReader出现错误和警告提示的解决办法

    识别结果的质量取决于多种因素,这些因素包括原始文档的质量.结构布局和文档导出参数等.在使用ABBYY FineReader Pro for Mac OCR文字识别软件处理文档的各个阶段,应用程序均可能 ...

  6. ABBYY FineReader 12最新官方版下载

    ABBYY FineReader是市场领先的文字识别(OCR)软件,可快速方便地将扫描纸质文档.PDF文件和数码相机的图像转换成可编辑.可搜索的信息,ABBYY FineReader 12是目前最新版 ...

  7. IE10、IE11 无法写入Cookie

    IE10.IE11 User-Agent 导致的 ASP.Net 网站无法写入Cookie 问题 你是否遇到过当使用一个涉及到Cookie操作的网站或者管理系统时,IE 6.7.8.9下都跑的好好的, ...

  8. vs2010 clickone 工程安装后的路径 win7

    C:\Users\xuan\AppData\Local\Apps\2.0\DX16T5JV.MLO\1H1ZAND1.1ZY\test..tion_f74974f651f2573b_0001.0000 ...

  9. Golang_test

    package main import ( "fmt" "time" ) func GetName() { //没事玩一下循环 for i := 0; i &l ...

  10. apache反向代理 负载均衡

    开启模块: LoadModule lbmethod_byrequests_module modules/mod_lbmethod_byrequests.so LoadModule slotmem_sh ...