转载 | CSS实现单行、多行文本溢出显示省略号(…)
本文引自:https://www.cnblogs.com/wyaocn/p/5830364.html
首先,要知道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实现单行、多行文本溢出显示省略号(…)的更多相关文章
- CSS 单行 多行文本溢出显示省略号
单行文本 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 多行文本溢出显示省略号: <style type=&quo ...
- CSS实现单行、多行文本溢出显示省略号(…)
如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方法: overflow: hidden; te ...
- CSS和JS实现单行、多行文本溢出显示省略号(该js方法有问题不对)
如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方法: overflow: hidden; te ...
- CSS单行、多行文本溢出显示省略号(……)
这个问题经常遇到 1.单行文本溢出显示省略号(…) text-overflow:ellipsis-----部分浏览器还需要加宽度width属性 overflow:hidden;text-overflo ...
- CSS单行、多行文本溢出显示省略号
如果实现单行文本的溢出显示省略号小伙伴们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方法: overflow: hidden; t ...
- CSS单行、多行文本溢出显示省略号(……)解决方案
单行文本溢出显示省略号(-) text-overflow:ellipsis-----部分浏览器还需要加宽度width属性 .ellipsis{ overflow: hidden; text-overf ...
- 《CSS实现单行、多行文本溢出显示省略号》
如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方式: overflow: hidden; te ...
- css 单行和多行文本溢出显示省略号
如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方法: overflow: hidden; te ...
- css实现单行、多行文本溢出显示省略号(…)
一.单行文本溢出显示省略号(…) 省略号在ie中可以使用text-overflow:ellipsis了,但有很多的浏览器都需要固定宽度了,同时ff这些浏览器并不支持text-overflow:elli ...
- css自动省略号...,通过css实现单行、多行文本溢出显示省略号
网页开发过程中经常会遇到需要把多行文字溢出显示省略号,这篇文章将总结通过多种方法实现文本末尾省略号显示. 一.单行文本溢出显示省略号(…) 省略号在ie中可以使用text-overflow:ellip ...
随机推荐
- 1、Java简介
Java SE: 最基础的部分,java的标准版本: Java EE: 企业版,(JSP.EJB.服务) Java ME:移动设备.游戏.通信 JVM: java virtual machine ...
- 微信小程序 CSS border-radius元素 overflow:hidden失效问题 iPhone ios 苹果兼容问题 伪类元素
同事找我解决一个问题 说安卓圆角没问题 苹果上失效了 我一看 其实就是没做兼容上图给你们看看 有没有看出来 其实就是父级设置圆角属性失效 父元素使用border-radius和overflow:hid ...
- ajax 的登录认证
在models中 先创建一个表 from django.db import models # Create your models here. class UserInfo(models.Model) ...
- 6.秋招复习简单整理之请你谈谈JDBC的反射,以及它的作用?
通过反射com.mysql.jdbc.Driver类,实例化该类时会调用该类的静态代码块,该代码块会去java的DriverManager类中注册自己,DriverManager管理所有已注册的驱动类 ...
- 第八章 Fisco Bcos 国密版本的部署、控制台搭建、合约的部署、sdk 调用
鉴于笔者以前各大博客教程都有很多人提问,早期建立一个技术交流群,里面技术体系可能比较杂,想了解相关区块链开发,技术提问,请加QQ群:538327407 参考资料 证书说明:https://mp.wei ...
- .Net Core Api 授权认证
一.所使用到的NuGet: 1. System.IdentityModel.Tokens.Jwt 2. Microsoft.AspNetCore.Authentication.JwtBearer 二. ...
- Bzoj 3813 奇数国 题解 数论+线段树+状压
3813: 奇数国 Time Limit: 10 Sec Memory Limit: 256 MBSubmit: 748 Solved: 425[Submit][Status][Discuss] ...
- Linux 提升逼格之 命令别名 分享
1, 使用场景 Linux下开发 肯定是日常要用命令行的,命令行里包含了众多的命令和工具,例如: git.shell.以及一众系统命令等. 举个例子,码农最常用的 git add ,如果加上别名 可设 ...
- linux weblogic12.1.3.0卸载过程
主要是一开始以为跟之前版本一样有uninstall.sh,但却找不到. 最后google 才发现改了个名字,deinstall.sh 可能后面的版本都是这个脚本了吧. 先进入脚本目录,命令:cd /h ...
- springboot项目问题记录one
上面三个方法描述如下: 首先有个业务,我是需要调取第三方一个sdk,然后sdk里面封装的kafka,也就是说,需要用sdk内置的连接kafka去消费消息,然后又有一个类需要实现Message,此Mes ...