用-webkit-私有属性,代码如下:
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

另外还有其他方法可以解决这个问题:
1、通过js来控制字数,然后截取文字
下面是一个例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>例子</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> 2、还有一种方法是通过后台控制,用程序控制,程序输出时来控制;这个不会……

div内文字显示两行,多出的文字用省略号显示的更多相关文章

  1. CSS——div内文字的溢出部分用省略号显示

    使得div内文字的溢出部分用省略号显示,可归纳为两种解决办法,一种方法是用CSS解决,另一种方法是js解决. 一.通过CSS控制显示 div内显示一行,超出部分用省略号显示 div内显示多行,超出部分 ...

  2. CSS div内文字显示两行,超出部分省略号显示

    1. 概述 1.1 说明 在项目过程中,有时候需要控制div内文字最多显示两行,超出的使用省略号进行处理.使用识别码/前缀-webkit进行处理可直接得到相应效果. 1.1 -webkit WebKi ...

  3. css 实现div内显示两行或三行,超出部分用省略号显示

    一.div内显示一行,超出部分用省略号显示 white-space: nowrap;    overflow: hidden;    text-overflow: ellipsis; 二.div内显示 ...

  4. All about Div内显示滚动桥

    Div内显示滚动桥看似是一个简单的前端问题,然而实际会发现还是有挺多需要注意的, 本文尝试对div内显示滚动桥的各种主要实现及一些难题进行研究. 横向滚动桥 横向滚动桥比较简单,无需设置宽度,直接ov ...

  5. JS控制文字只显示两行,超出部分显示省略号

    由于使用css控制文字只显示多行,超出部分显示省略号,存在一定的兼容性问题,所以总结了一下网上一些大咖使用js实现控制行数的解决方案. 第一步:依次引入jquery.js+jquery.ellipsi ...

  6. css一div内文字居中

    在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...

  7. CSS——div垂直居中及div内文字垂直居中

    最近做demo时,经常需要div垂直居中或者让div内文字相对div垂直居中.水平居中比较简单,就不多说了,这里主要记录一下垂直居中的一些方法. 一.div垂直居中的一些方法: 1.当height.w ...

  8. 关于DIV内文字垂直居中的写法

    最近在写UI,或多或少用到了CSS,在这记录一下,今天用到的DIV内文字垂直居中的写法, 因为所做的项目都是基于WebKit内核浏览器演示的,所以我们今天采用的是-webkit-box的写法: dis ...

  9. 如何让div中的文字只显示一行,多余的文字隐藏并加上省略号(超链接形式)

    写页面的时候遇到了一个小小的问题,如何让div中一行超链接文字只显示一行,多余的文字隐藏并加上省略号,悬浮时隐藏的文字显示出来?解决问题时发现了css3的一个新标签  text-overflow  , ...

随机推荐

  1. dependencies 与 devDependencies 的区别

    dependencies 与 devDependencies 的区别 在使用 npm install 安装 npm 包时,有两种命令参数可以把它们的信息写入 package.json 文件: --sa ...

  2. JavaScript的作用域详解。

    首先讲原理,大家都知道JS是逐行执行,首先进入作用域只有有两种方式:  1.当看到script标签的时候,进入到作用域,也就是内置的<script></script>     ...

  3. Redis入门必读,The Little Redis Book中文版

    csdn的博客都要搬到这里了 The Little Redis Book中文版 入门 The Little Redis Book中文版 第一章 - 基础知识 The Little Redis Book ...

  4. Java 8 Date-Time API 详解

    从Java版本1.0开始就支持日期和时间,主要通过java.util.Date类. 但是,Date类设计不佳. 例如,Date中的月份从1开始,但从日期却从0开始.在JDK 1.1中使用它的许多方法已 ...

  5. xshell无法登录阿里云服务器

    1. 现象 a. 使用xshell无法登录服务器 b. 查看sshd服务 c. 不同公网ip的电脑正常登陆 2. 解决方案 a. 不同公网ip可以登录,断定是ip被黑名单,联系阿里云服务,把公网ip加 ...

  6. 【BZOJ3930】选数(莫比乌斯反演,杜教筛)

    [BZOJ3930]选数(莫比乌斯反演,杜教筛) 题面 给定\(n,K,L,R\) 问从\(L-R\)中选出\(n\)个数,使得他们\(gcd=K\)的方案数 题解 这样想,既然\(gcd=K\),首 ...

  7. [SDOI2010]粟粟的书架

    题目大意: 网址:https://daniu.luogu.org/problemnew/show/2468 大意:本题有两问: [1] 给定一个\(R*C\)的带权矩阵,询问\(2×10^5\)次在一 ...

  8. Spring【AOP模块】就是这么简单

    前言 到目前为止,已经简单学习了Spring的Core模块.....于是我们就开启了Spring的AOP模块了...在讲解AOP模块之前,首先我们来讲解一下cglib代理.以及怎么手动实现AOP编程 ...

  9. LINUX下解决TIME_WAIT等网络问题

    修改配置文件 /etc/sysctl.conf net.ipv4.tcp_tw_reuse = 1net.ipv4.tcp_tw_recycle = 1net.ipv4.tcp_fin_timeout ...

  10. python迭代和切片

    from collections import Iterable #切片************************ # #取一个list或tuple的部分元素是非常常见的操作 ,Python提供 ...