设置文字多行显示溢出显示省略号

 

#news_text {
border: 1px solid red;
width: 200px;
word-break: break-all;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
/*这里可以设置文本显示的行数*/
overflow: hidden;
}<div id="news_text">
要溢出去的文字要溢出去的文字要溢出去的文字要溢出去的文字要溢出去的文字要溢出去的文字要溢出去的文字
</div>

  

上面的方法固然简单实际并不怎么使用暂且我还没有找到兼容IE 的做法于是自己写了段JS实现上面相同的效果。


css 代码

#news_text {
width: 150px;
word-break: break-all
}

HTML 代码

<div id="news_text">
要溢出去的文字要溢出去的文字要溢出去的文字要溢出去的文字要溢出去的文字要溢出去的文字要溢出去的文字

</div>

JS 代码

<script type="text/javascript">var news_text = document.getElementById("news_text");var maxLength = 40;var textLength = news_text.innerHTML;if (textLength.length > maxLength) {var texts = textLength.substring(0, maxLength);news_text.innerHTML = texts + ".....";
}
</script>

  

可根据maxLength调节你的字数

转载于:https://www.cnblogs.com/pandaer/p/5428653.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/357316.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vue项目有几个接口content Download时间特别长的解决办法

做的可视化地图项目&#xff0c;有几个接口加载比较慢&#xff0c;大概16S左右&#xff0c;第一次加载接近一分钟&#xff0c;这谁能受得了。 对比了正式环境和测试环境&#xff0c;这个接口数据量一样&#xff0c;就是在测试服务器比较慢&#xff0c;排除滚动插件及其它的影响…

Java中集合的自定义运算符

总览 操作员重载有多种语言可用。 Java对String类型的运算符的支持对运算符的重载非常有限。 我们可以利用其他语言支持运算符的不同方式&#xff0c;但是可以在Java中实现一个使用Java已经使用的约定的实现。 获取&#xff0c;设置和放置操作 集合的运算符重载的一个常见示例…

【Java从入门到天黑|03】JavaSE入门之流程控制

大家好,我是孙叫兽,本期内容给大家分享一下JavaSE入门之流程控制。 用户交互Scanner 1、Scanner对象 之前我们学的基本语法中我们并没有实现程序和人的交互,但是Java给我们提供了这样一个工具类,我们可以获取用户的输入。java.util.Scanner 是 Java5 的新特征,我们可以通过…

Jmeter调试工具---HTTP Mirror Server

转自&#xff1a;http://www.cnblogs.com/puresoul/p/4907655.html 一、HTTP Mirror Server的作用&#xff1a; 它可以在本地临时搭建一个HTTP服务器&#xff0c;该服务器把接收到的请求原样返回&#xff0c;这样就可以看到发送出的请求的具体内容&#xff0c;以供调试。 二、…

520 单身福利|女朋友又找我要礼物

大家好&#xff0c;我是孙叫兽&#xff0c;520快到了&#xff0c;给大家分享一下单身福利&#xff01;时间过得真快&#xff0c;一转眼又到了 520&#xff0c;有对象的程序员又激动又扎心的节日&#xff0c;其实吧&#xff0c;程序员对这种节日又期待又焦灼&#xff0c;为什么呢…

pit和systick_PIT和TestNG突变测试简介

pit和systick变异测试是一种技术&#xff0c;它可以发现测试未涵盖代码的哪些部分。 它类似于代码覆盖范围 &#xff0c;但变异测试不限于在测试期间执行给定行的事实。 这个想法是修改生产代码&#xff08;引入突变&#xff09;&#xff0c;这应该改变其行为&#xff08;产生不…

使用vue-seamless-scroll自动滚动插件复制出来的数据点击事件无效的解决办法

引言&#xff1a;做可视化地图项目&#xff0c;使用vue-seamless-scroll实现表格数据自动滚动&#xff0c;有个bug就是复制出来的数据点击事件失效。这个插件底层的实现是cope的形式&#xff0c; 无限滚动原理&#xff1a;无限滚动的原理就是把之前的遍历的内容复制一份&#x…

最短路的几种算法及其优化(模板)

一.Dijkstra 算法 dijkstra算法适用于边权为正的情况&#xff0c;求单源最短路&#xff0c;适用于有向图和无向图 模板伪代码&#xff1a; 清除所有点的标号 设d[0]0&#xff0c;其余d[i]INF&#xff1b; 循环n次{ 在所有未标记的节点中&#xff0c;寻找d[i]最小的点x 给x做标记…

极客青年说,北京沙龙

大家好&#xff0c;我是孙叫兽&#xff0c;本期内容给大家分享infoq写作平台在北京站的沙龙主题。主要流程如下&#xff1a;早上起来&#xff0c;吃了点饭&#xff0c;然后就去北京望京悠乐汇的A1202,这次是个轰趴馆&#xff0c;比较适合年轻的程序员放松。去的稍微早了点&…

html css 知识回顾2

在学习代码期间&#xff0c;练习代码是必不可少的内容&#xff0c;同样的对知识点的回顾也是更加重要的&#xff0c;在练代码的同时回顾知识点效果会更好。&#xff08;知识会有重复的&#xff0c;我遵循的是不论是什么时候的知识都会从头来一遍&#xff0c;对于新掌握的我会再…

vue点击弹窗自动触发点击事件的解决办法

业务场景&#xff1a;使用vue element ui 的el-dialog&#xff0c;点击弹窗之后&#xff0c;默认加载第一个按钮的数据进行初始化。 div 指令&#xff1a; // 自动触发点击事件directives:{trigger:{inserted(el,binging){// console.log("自动触发事件")el.click()}…

谈谈yii2-gii如何自定义模板

作者&#xff1a;白狼 出处&#xff1a;http://www.manks.top/article/yii2_gii_custom_template本文版权归作者&#xff0c;欢迎转载&#xff0c;但未经作者同意必须保留此段声明&#xff0c;且在文章页面明显位置给出原文连接&#xff0c;否则保留追究法律责任的权利。 yii2中…

vue自定义指令directives实现自动点击事件及自动点击第一个按钮

业务场景:点击弹窗默认加载第一个按钮的数据。vue自定义指令directives实现这个需求 目录 自动点击所有的按钮。 自动点击第一个按钮, 自动点击所有的按钮。 <ul class="areaList"><li:class="{active: index

人员雇佣 网络流_雇用Java EE开发人员的一些面试问题

人员雇佣 网络流互联网上充斥着Java开发人员的面试问题。 这些问题的主要问题是&#xff0c;它们仅证明候选人具有良好的记忆力&#xff0c;并记住所有语法&#xff0c;结构&#xff0c;常量等。对他/她的逻辑推理没有真正的评估。 我在下面列举一些面试问题的例子&#xff0c;…

vue根据表格字段不同的状态显示不同的颜色。

业务需求:根据后台返回的数据,对表格中的严重等级和问题状态做一下颜色区分。数据很大,大概一年左右的数据,在二级弹窗中,数据滚动的形式。 大家好,我是孙叫兽 不加状态前: 我这个使用vue+div循环的实现,很便捷,使用element ui也是可以的。 然后再computed:{}中添加…

[IT业界] 网盘纷纷停止服务,下一个是谁?

今天新浪微盘发公告称即日起调整服务功能&#xff0c;停止普通用户的存储服务&#xff0c;也就是将关闭新浪微盘的搜索、分享功能。2016年以来&#xff0c;已经有115网盘、UC网盘等多家网络数据在线存储产品宣布关闭文件存储、分享功能&#xff0c;这对这些产品本身而言是致命的…

Apache JMeter教程

要负载测试您的Web应用程序吗&#xff1f; 然后&#xff0c;您应该了解Apache JMeter &#xff01; 该JMeter教程介绍了基本概念以及如何创建测试计划以及如何执行它以对应用程序进行基准测试。 这是我在Disy的Tech-Blog上的文章的交叉张贴 -谢谢您让我在公司时间写文章&…

浏览器在线PDF预览取消下载按钮

业务场景:需要在线PDF下载的功能,刚开始用的是第三方的PDF.JS,按照网上的方法操作,排查,发现没有作用,经过和后端小伙伴沟通,原来这个地址是浏览器PDF预览。 目录 浏览器PDF取消办法: 在需要URL地址后边加上代码 PDF.JS取消下载的办法:</

Android深度探索(卷1)HAL与驱动开发 读书笔记(第四章)

第四章 源代码的下载和编译 本章主要介绍使用Git下载两套源代码。一套是Android 源代码&#xff0c;另一套是Linux 内核源代码。主要介绍如何下载和编译Android源代码和Linux内核源代码。 4.1下载Android源代码的环境 第一步&#xff1a;创建一个存放下载脚本文件repo的目录 #…

【Java从入门到天黑|04】JavaSE入门之数组

目录 数组概述 数组的四个基本特点: 数组声明创建 1、声明数组 2、创建数组