css实现多行换行，并自动在后面加省略号

css有换行的标签，但是只能实现单行换行，使用起来很不方便。以下代码可以实现多行换行，并且后面自动加省略号，但是在使用之前需要给它一个固定的宽度,把下面的代码直接复制过去就可以了。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><style>//1.单行文本省略.text1{white-space: nowrap;text-overflow: ellipsis;overflow: hidden;display:block;}//2.多行文本省略隐藏.text2{       width: 200px;word-break: break-all;text-overflow: ellipsis;display: -webkit-box;/** 对象作为伸缩盒子模型显示 **/-webkit-box-orient: vertical;/** 设置或检索伸缩盒对象的子元素的排列方式 **/-webkit-line-clamp: 2;/** 显示的行数 **/overflow: hidden;/** 隐藏超出的内容 **/word-wrap:break-word;/*英文强制换行*/      }</style>
</head>
<body><div class="text2">一起长大的约定，那样珍惜，与你聊不完的曾经。而我已经分不清，你是友情还是错过的爱情</div>
</body><script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script><script>// 中间显示省略号，截取显示括号内容
var str = $(".text").text();
var last = 0;
var all = str.length;
var fisrt = str.substring(0,6);
// 没有中文括号（
if (str.lastIndexOf('（') == -1) {// 也没有英文括号(if (str.lastIndexOf('(') == -1) {last = all - 5;}else{// 有英文括号(，就从英文括号开始截取last = str.lastIndexOf('(');}
}else{last = str.lastIndexOf('（');
}
// 如果长度大于13个字符才显示省略号
if (all > 16) {$(".text").text(fisrt+" ... "+str.substring(last,all));
}</script>
</html>

css实现多行换行，并自动在后面加省略号相关推荐

css控制显示行数，多出部分显示省略号
webkit-line-clamp:number;控制行数, 是一个不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中.为了实现该效果,它需要组 ...
关于css多行换行省略和第二行起缩进
css多行换行省略: padding-left: pxToRem(10);text-indent: pxToRem(-8);overflow: hidden;text-overflow: ellips ...
CSS字体、行高等其他样式
CSS字体.行高等其他样式一.长度单位与颜色单位 1. 长度单位 <!DOCTYPE html> <html lang="en"><head> ...
css实现3行2列居中高度自适应布局
1.CSS2盒模型自从1996年CSS1的推出,W3C组织就建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层< ...
CSS样式自动换行(强制换行)
自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼,下面介绍的是CSS如何实现换行的方法对于div,p等块级元素正常文字的换行(亚洲文字和非亚洲文字)元 ...
html 破折号自动换行,HTML+CSS 对于英文单词强制换行但不截断单词的解决办法
如何处理长的单词和链接(强制换行,连接符,省略号等) 我们在前端开发中经常会遇到一些很长的文本串从它的容器中溢出,例如: 通过这样一段css可以有效解决这种问题: .dont-break-out { ...
css设置1.5倍行高,CSS怎么控制行高？
CSS怎么控制行高? css中,调整每行文字字体间距(行距)是使用line-height属性. ● line-height 属性设置行间的距离(行高). 注:不允许使用负值. 要实现上下换行文字行间距 ...
css如何让不自动换行,css实现强制不换行/自动换行/强制换行
在我们日常的编码中经常会遇到这段文字不可以换行,或者自动换行的需求.虽然这个功能在我们平时很常见但是我相信大家一定不会可以的去记住它吧(至少♦ 嘻嘻...).今天我们来学习一下如何熟练的掌握用css实 ...
laravel文字+链接（英文字符）--多行换行处理
laravel框架中:一个模块中,有一些文字,文字中可能包含超链接,要让超链接正常显示,且让中文后紧跟英文,英文也换行显示: 1.HTML相关处理前端从后端获取到的超链接数据形式是 HTML实体, ...

css实现多行换行，并自动在后面加省略号

css实现多行换行，并自动在后面加省略号相关推荐

最新文章

热门文章