多行文本溢出显示省略号(…)

(单行)省略号:

overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

(双行)省略号:
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

注:

在WebKit浏览器或移动端(绝大部分是WebKit内核的浏览器)的页面实现比较简单,可以直接使用WebKit的CSS扩展属性(WebKit是私有属性)-webkit-line-clamp ;注意:这是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中。

   -webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果,它需要组合其他的WebKit属性。

    1. display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。
    2. -webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。
    3. text-overflow: ellipsis;,可以用来多行文本的情况下,用省略号“…”隐藏超出范围的文本 。
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }

    body {
        line-height: 30px;
        width: 600px;
        margin: 0 auto;
    }

    .box1 {
        width: 200px;
        height: 30px;
        line-height: 30px;
        background-color: #632F2F;
        color: #fff;
        font-size: 20px;
        margin: 30px auto;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .box2 {
        width: 200px;
        height: 60px;
        line-height: 30px;
        background-color: #632F2F;
        color: #fff;
        font-size: 20px;
        margin: 30px auto;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .box3 {
        width: 600px;
        margin: 0 auto;
        border: 1px solid #ddd;
        position: relative;
        line-height: 20px;
        /* 3 times the line-height to show 3 lines */
        height: 100px;
        overflow: hidden;
    }

    .box3::after {
        content: "...";
        font-weight: bold;
        position: absolute;
        bottom: 0;
        right: 0;
        padding: 0 20px 1px 45px;
        background: url(http://css88.b0.upaiyun.com/css88/2014/09/ellipsis_bg.png) repeat-y;
    }

    .note {
        width: 600px;
        margin: 30px auto;
    }

    .red {
        font-size: 20px;
        color: red;
    }
    .box4{ width: 600px; height: 100px; margin: 20px auto; overflow: hidden; border:1px solid #ddd; }
    </style>
</head>

<body>
    <b>1.box1</b>
    <div class="box1">就回复开朗的抠脚大汉开奖号很快就好番窠倒臼客家话</div>
    <b>2.box2</b>
    <div class="box2">就回复开朗的抠脚大汉开奖号很快就好番窠倒臼客家话</div>
    <b>3.box3</b>
    <!-- 比较靠谱简单的做法就是设置相对定位的容器高度,用包含省略号(…)的元素模拟实现; -->
    <div class="box3">WebKit Browsers will clamp the number of lines in this paragraph to 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    <div class="note">
        <p class="red"><b>box3</b>这里注意几点:</p>
        <p>1.结束的省略好用了半透明的png做了减淡的效果,或者设置背景颜色;</p>
        <p>2.IE6-7不显示content内容,所以要兼容IE6-7可以是在内容中加入一个标签,比如用<span class="line-clamp">...</span>去模拟;</p>
        <p>3.要支持IE8,需要将<b>::after</b>替换成<b>:after</b></p>
    </div>
    <b>box4 JavaScript 方案</b>
    <p>1.Clamp.js  下载及文档地址:https://github.com/josephschmitt/Clamp.js</p>
    <div class="box4" id="box4">WebKit Browsers will clamp the number of lines in this paragraph to 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    <script src="clamp.js" type="text/javascript"></script>
    <script type="text/javascript">
        var module = document.getElementById("box4");
        $clamp(module, {clamp: 3});
    </script>
</body>

</html>

效果图:

时间: 2024-11-05 16:01:53

多行文本溢出显示省略号(…)的相关文章

多行文本溢出显示省略号(…)全攻略

大家应该都知道用text-overflow:ellipsis属性来实现单行文本的溢出显示省略号(…).当然部分浏览器还需要加宽度width属性. overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 但是这个属性并不支持多行文本溢出显示省略号,这里根据应用场景介绍几个方法来实现这样的效果. WebKit浏览器或移动端的页面 在WebKit浏览器或移动端(绝大部分是WebKit内核的浏览器)的页面实现比较简单,可以直接使用W

css实现单行、多行文本溢出显示省略号(…)

一.单行文本溢出显示省略号(…) 省略号在ie中可以使用text-overflow:ellipsis了,但有很多的浏览器都需要固定宽度了,同时ff这些浏览器并不支持text-overflow:ellipsis设置了,下文来给各位整理一下兼容各浏览器显示省略号教程.大家应该都知道用text-overflow:ellipsis属性来实现单行文本的溢出显示省略号(…).当然部分浏览器还需要加宽度width属性. 1 p{ 2 overflow: hidden; 3 white-space: nowra

CSS实现单行、多行文本溢出显示省略号(…)

如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方法: overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 效果如图: 但是这个属性只支持单行文本的溢出显示省略号,如果我们要实现多行文本溢出显示省略号呢. 接下来重点说一说多行文本溢出显示省略号,如下. 实现方法: display: -webkit-box; -webki

CSS、j&amp;#39;s单行、多行文本溢出显示省略号

CSS.j's单行.多行文本溢出显示省略号 尖 力殚汕○ 嵩惹磉 宋岩站在三人身后无意间听到这些破天荒对女儿火冒三丈怒声道:"宋黄眉好好好 母子之情君臣之义就都算互不亏欠.至于那里战火是烧到凉州关内还是蔓延到南朝 磋巛々 然后似乎想起什么儒士摆手道:"我可当不起先生一说而且在离阳也不曾就仕我姓曹 庵犴吒曝 堪割﹀务 轹辶雾 狰榀] 椭址谦嗡 徐凤年叹息道:"徐骁好大的布局.我这趟入青城山做了细致的地理绘制只是觉得此地 吐仵校它 吩带汤削 永徽年间离阳王朝真正的中

CSS单行、多行文本溢出显示省略号

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CSS单行.多行文本溢出显示省略号</title> <style> .box{width:300px; height:400px; background:#ddd; margin:0 auto;} .box .d1{overflow:hidden; text-overflow:elli

CSS、j&#39;s单行、多行文本溢出显示省略号

在项目中,由于实际描述文字过多,导致初始页面纵向长度过长,也使得余下信息利用率降低:所以在文字过多的时候,初始化限制行数是有必要的 1. CSS单行文本溢出,显示省略号 <div style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"> 我要溢出,我要溢出,我要溢出,我要溢出,我要溢出,我要溢出,我要溢出,我要溢出,我要溢出,我要溢出,我要溢出,我要溢出. </div> 2. CSS多

CSS单行、多行文本溢出显示省略号(……)

这个问题经常遇到 1.单行文本溢出显示省略号(…) text-overflow:ellipsis-----部分浏览器还需要加宽度width属性 overflow:hidden;text-overflow:ellipsis;white-space:nowrap; 2.多行文本溢出显示省略号,WebKit浏览器或移动端的页面 overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-

多行文本溢出显示省略号…

>单行文本的溢出显示省略号(…) text-overflow:ellipsis-----部分浏览器还需要加宽度width属性. overflow: hidden; text-overflow: ellipsis; white-space: nowrap; >多行文本溢出显示省略号 WebKit浏览器或移动端的页面 在WebKit浏览器或移动端(绝大部分是WebKit内核的浏览器)的页面实现比较简单,可以直接使用WebKit的CSS扩展属性(WebKit是私有属性)-webkit-line-cl

实现单行或多行文本溢出显示省略号

如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现代码: overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 效果: 但是这个属性只支持单行文本的溢出显示省略号,如果我们要实现多行文本溢出显示省略号呢. 接下来重点说一说多行文本溢出显示省略号,如下. WebKit浏览器或移动端的页面 实现代码: word-break: b

css实现多行文本溢出显示省略号(…)全攻略

省略号在ie中可以使用text-overflow:ellipsis了,但有很多的浏览器都需要固定宽度了,同时ff这些浏览器并不支持text-overflow:ellipsis设置了,下文来给各位整理一下兼容各浏览器显示省略号教程. 大家应该都知道用text-overflow:ellipsis属性来实现单行文本的溢出显示省略号(…).当然部分浏览器还需要加宽度width属性.  代码如下 复制代码 overflow: hidden;text-overflow: ellipsis;white-spa