今天做东西，遇到了这个问题，百度后总结得到了这个结果。

首先，要知道css的三条属性。

overflow:hidden; //超出的文本隐藏

text-overflow:ellipsis; //溢出用省略号显示

white-space:nowrap; //溢出不换行

这三个是css的基础属性，需要记得。

但是第三条属性，只能显示一行，不能用在这里，那么如果显示多行呢？

css3解决了这个问题，解决方法如下：

display:-webkit-box; //将对象作为弹性伸缩盒子模型显示。

-webkit-box-orient:vertical; //从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）

-webkit-line-clamp:2; //这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数。

最后的css样式如下：

overflow:hidden;

text-overflow:ellipsis;

display:-webkit-box;

-webkit-box-orient:vertical;

-webkit-line-clamp:2;

转载自：http://blog.csdn.net/bing0728004/article/details/51509435

如果是两行或者三行的容器，想要纯用css实现这个方法，是没办法做到的。

可以提供两种方法，一是用程序输出时截字，二是用js判断字数截取。

JS的demo如下：

　　　　　　

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Examples</title>

<style type="text/css">

.demo{width:100px;}

</style>

</head>

<body>

<div class="demo" id="demo">怎么显示两行或三行文字，然后多出的部分省略号代替?</div>

<script>

// js无法直接通过class获取对象，必须自己写一个方法,这样效率会非常低，原生js里最好用id获取，

// 直接用id获取domo对象

var oBox=document.getElementById('demo');

// slice() 方法可从已有的数组中返回选定的元素。

// 您可使用负值从数组的尾部选取元素。

// 如果 end 未被规定，那么 slice() 方法会选取从 start 到数组结尾的所有元素。

// 此处需要根据需求自行修改slice()的值，以达到要显示的内容

var demoHtml = oBox.innerHTML.slice(0,10)+'...';

// 填充至指定位置

oBox.innerHTML = demoHtml;

</script>

</body>

</html>

css超出2行部分省略号...的更多相关文章

  1. css超出多行隐藏

      单行隐藏: overflow: hidden;/*超出部分隐藏*/ text-overflow:ellipsis;/* 超出部分显示省略号 */ white-space: nowrap;/*规定段 ...

  2. 【css】 文本超出2行显示省略号

    首先,要知道css的三条属性. overflow:hidden; //超出的文本隐藏 text-overflow:ellipsis; //溢出用省略号显示 white-space:nowrap; // ...

  3. css 超出规定行数自动隐藏

     单行overflow: hidden;text-overflow: ellipsis;white-space: nowrap;  多行(兼容各个浏览器)//通过覆盖最后几个字的形式p{positio ...

  4. 【css】文本超出行数以省略号显示

    //超出2行省略overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webk ...

  5. css文本溢出隐藏显示省略号（单行+多行）

    文本超出若干行就换行,这个功能几乎每个文本浏览网站都会用到,实现它的办法也有很多,今天简单的介绍一下实现它的方法.  一. 单行文本不换行,并将超出文本隐藏 .box-content{     ove ...

  6. css超出一行添加省略号属性:text-overflow和white-space

    通过使用text-overflow和white-space属性来使文本在一行内显示,超出则加省略号,添加如下html代码: <p>前端开发博客专注前端开发和技术分享,如果描述超过100像素 ...

  7. css限制文字显示字数长度，超出部分自动用省略号显示,防止溢出到第二行

    为了保证页面的整洁美观,在很多的时候,我们常需要隐藏超出长度的文字.这在列表条目,题目,名称等地方常用到. 效果如下: 未限制显示长度,如果超出了会溢出到第二行里.严重影响用户体验和显示效果. 我们在 ...

  8. css多行显示省略号

    首先说css多行显示省略号和单行文本省略号: 我们知道,单行显示省略号时,我们首先需要设置容器的宽度width:value(具体的值),然后强制文本在一行内显示,即white-spacing:nowr ...

  9. css实现超出一行后用省略号显示

    css实现超出一行后用省略号显示 a{display:inline-block; text-overflow:ellipsis; white-space:nowrap; overflow:hidden ...

随机推荐

  1. unity自动保存项目

    原文来自于:http://wiki.unity3d.com/index.php?title=AutoSave#C.23_-_AutoSave.cs      (奋斗的菜鸟_1029633680) 很多 ...

  2. apache服务器配置Net的实践

    前置: 在xp系统中,打补丁之类或啥子操作引起或多或少的问题,最终导致iis不能使用: 不想装系统...忍着... 最近突发事件导致,需要摸一下apache服务器处理,好吧,那就搜索下吧..... 目 ...

  3. php 基础知识

    一.判断代码输出 $str1 = null; $str2 = false; echo $str1==$str2 ? '相等' : '不相等'; $str3 = ''; $str4 = 0; echo ...

  4. Oracle Purchasing QUESTIONS AND ANSWERS

    Topic Summary Topic: CORRECTIONS: Corrections Topic: DELIVER: Receiving Delivery Topic: DROPSHIP: Dr ...

  5. Redis内存数据库在Exchange会议室的应用

    本文论述了现有Exchange会议室应用现状和不足之处,并详细介绍了Redis内存数据库在Exchange会议室的应用,并给出了一种高性能的应用架构及采用关键技术和关键实现过程,最终实现大幅改进系统性 ...

  6. Qt的零碎知识

    1.QObject是所有Qt对象的基类,他给C++的类带来了若干新的功能.使用Q_OBJECT宏能声明一个C++类为一个QObject.如: class Notepad : public QMainW ...

  7. 实现无锁的栈与队列(5)：Hazard Pointer

    两年多以前随手写了点与 lock free 相关的笔记:1,2,3,4,质量都不是很高其实(读者见谅),但两年来陆陆续续竟也有些阅读量了(可见剑走偏锋的技巧是多容易吸引眼球).笔记当中在解决内存释放和 ...

  8. Gamma Gamma~!!!

    左图是没有进行gamma矫正的,右图是进行了gamma矫正的.以前一直以为是Tone Map的公式计算有问题,后来看PBR的paper时候,终于明白了gamma的重要性,一改,果然发现颜色不想以前那么 ...

  9. Linux shell tee指令学习

    转载自:http://blog.163.com/xujian900308@126/blog/static/12690761520129911304568/   tee tee:读取标准输入的数据,并将 ...

  10. css命名那些事儿

    根据目前彩票行业的公司进行css命名的层级解析,此次选择了网易彩票,QQ彩票,澳客彩票网,中国竞彩网,500.com,彩票365,新浪彩票,新浪爱彩,凤凰彩票,淘宝彩票的首页进行css命名的采集和分析 ...