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

#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

设置文字多行显示溢出显示省略号相关推荐

html设置文字出现效果,文本溢出显示省略号效果怎么实现？
在HTML页面中经常会遇到文本溢出,需要将超出的部分隐藏并显示省略号的情况,那么这个文本溢出显示省略号效果是怎么实现的呢?下面本篇文章就来给大家介绍一下使用CSS实现文本溢出显示省略号效果的方法,希望 ...
4种方法实现单行、多行——文本溢出显示省略号
一.单行溢出在前端基础,单行文本的溢出显示省略号,这种做法我们通常用text-overflow来实现,然后给元素定宽,超出隐藏,具体如下面一段代码: 显示效果: 二.那么多行文本溢出呢?具体代码如下 ...
[博应用软件]wps文档如何设置文字双行合一
博应用,用心发现好应用 wps怎么双行合一?很多用户在使用wps时,需要用到把文字合并成二排行列样式,却不知道该怎么双行合一. 1.输入文字,选定文字,点击开始,然后点击"中文版式" ...
单行文本和多行文本溢出以省略号显示方法
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
elementui中，表格里的文字设置指定行溢出显示省略号，并且鼠标放上去能看到全部的文字
嗨害嗨,我又来了奥.今天呢,遇到有人问了一个这样的问题,就是如果在elementui中,表格里的文字设置指定行溢出显示省略号,并且鼠标放上去能看到全部的文字,该怎么做. 首先,我们知道elementu ...
CSS 多行文字溢出显示省略号效果
.box1{width: 100px;/* height: 100px; */border: 1px solid #ccc;overflow: hidden;text-overflow: ellips ...
css多行超出显示点_CSS实现单行、多行文本溢出显示省略号（…）
如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方法: overflow: hidden; te ...
qtreewidgetitem 文字内存太长换行_table文字溢出显示省略号问题
每日金句『专注做一件事』2009 年的<麻省理工科技评论>(MIT TechnologyReview)中有一篇文章写道,人脑的带宽只有区区60比特/ 秒,是(那个年代)上网带宽的十万分之 ...
如何设置省略号对其序号 html,CSS实现单行、多行文本溢出显示省略号（…）
最好用max-height来限制一下web 若是实现单行文本的溢出显示省略号同窗们应该都知道用text-overflow:ellipsis属性来,固然还须要加宽度width属来兼容部分浏览.浏览器实 ...

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

设置文字多行显示溢出显示省略号相关推荐

最新文章

热门文章