zoukankan      html  css  js  c++  java
  • div里面的内容超出自身高度时,显示省略号

    1.给DIV设置属性: 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>
  • 相关阅读:
    lightoj 1027 简单概率dp
    zoj 3329 One Person Game 概率dp
    光速输入法
    百度卫士+7654联盟
    MyCCL复合特征码定位系统3.0 build 23 中文绿色版
    右键管家MenuMgr-1.2单文件
    影子卫士中文注册版+系统保护的尚方宝剑、、
    Easyspy网络检测系统
    百度杀毒+7654联盟
    QQ浏览器+7654联盟
  • 原文地址:https://www.cnblogs.com/fhtwins/p/3766041.html
Copyright © 2011-2022 走看看