div内文字显示两行,多出的文字用省略号显示
2024-10-19 16:27:49
用-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、还有一种方法是通过后台控制,用程序控制,程序输出时来控制;这个不会……
最新文章
- MLlib决策树与集成树
- 大数的除法 不使用BigInteger Java实现
- Grpc微服务从零入门
- jQuery同步Ajax带来的UI线程阻塞问题及解决办法
- unix环境高级编程基础知识之第一篇
- classmethod一个用处是创建可选类构造器
- activiti
- hdu 1526(最大匹配)
- SPRING IN ACTION 第4版笔记-第三章ADVANCING WIRING-008-SpEL介绍
- MTRR内存类型范围寄存器
- 伪AP检测技术研究
- lang
- 初探JavaScript的截图实现
- 神贴真开眼界:为什么很多人倡导重视能力和素质,但同时对学历有严格要求?——代表了上一场比赛的输赢,招聘成本很重要。如果上一场游戏失败了,尽量让自己成为当前群体的尖子。学历只是其中的一个作品而已,但学历代表了学生时代为之做出的牺牲。人群自有偏向集中性 good
- Java 连接 MySQL 数据库
- 对比JavaScript中的Continue和Break
- 删除本地git的远程分支和远程删除git服务器的分支【转】
- Python 爬虫四 基础案例-自动登陆github
- VS code 配置C++编译环境
- C++ 智能指针二
热门文章
- freemarker报错之十四
- SQL错误:ORA-12899
- 异常-----java.lang.NoClassDefFoundError: Could not initialize class net.sf.cglib.core.KeyFactory
- Struts2【配置】知识要点
- 【JDK1.8】JUC.Lock综述
- js和jquery设置disabled属性为true使按钮失效
- 开发IOS应用真的一定要买苹果电脑设备吗?
- 三方面搞定http协议之“状态码”
- 【Unity3D与23种设计模式】游戏的主循环——Game Loop
- python爬微信公众号前10篇历史文章(5)-JSON相关内容小结