css强制换行和超出隐藏实现(单行和多行)

<!--

white-space:设置如何处理元素内的空白；

word-break: normal|break-all|keep-all;

word-break：用来标明怎么样进行单词内的断句

word-wrap: normal|break-word;

word-wrap:用来标明是否允许浏览器在单词内进行断句，这是为了防止当一个字符串太长而找不到它的自然断句点时产生溢出现象。

text-overflow:ellipsis; 让多出的内容以省略号...来表达。但是这个属性主要用于IE等浏览器，Opera浏览器用-o-text-overflow:ellipsis; 而Firefox浏览器没有这个功能，多出的内容只能隐藏起来。

display:-webkit-box; //将对象作为弹性伸缩盒子模型显示。

-webkit-box-orient:vertical; //从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）

-webkit-line-clamp:2; //这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数。

/* autoprefixer: off */ /* autoprefixer: on */解决-webkit-box-orient:vertical

-->

通俗点的解释：

word-break:break-all;只对英文起作用，以字母作为换行依据
word-wrap:break-word; 只对英文起作用，以单词作为换行依据
white-space:pre-wrap; 只对中文起作用，强制换行
white-space:nowrap; 强制不换行，都起作用
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;不换行，超出部分隐藏且以省略号形式出现（部分浏览器支持）

案例：案例里面有注释，

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>body {width: 100%;margin: 200px 20%;}.indexBox1 {width: 60%;height: 100px;font-size: 14px;color: #ffffff;display: flex;justify-content: space-around;}/* 单行 */.indexBox1 .box_text1 {width: 100px;height: 98px;background: gray;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;/* word-break: normal;word-wrap: none; */}/* 多行 */.indexBox1 .box_text4 {width: 100px;height: 98px;background: black;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;/* Firefox */display: -moz-box;/* autoprefixer: off */-moz-box-orient: vertical;/* autoprefixer: on *//* Safari、Opera 以及 Chrome */display: -webkit-box;/* autoprefixer: off *//*解决下面这个属性不显示*/-webkit-box-orient: vertical;/* autoprefixer: on *//*解决上面这个属性不显示*//* 控制在第几行多出的内容省略 */-webkit-line-clamp: 5;}.indexBox1 .box_text5 {/* word-break: normal|break-all|keep-all; */word-break: break-all;}.indexBox1 .box_text6 {/* word-wrap: normal|break-word; */word-wrap: break-word;}</style>
</head><body><!-- 单行 --><div class="indexBox1"><div class="box_text1">我们来自同一个世界，我们都有自己的梦想，我们都不曾放弃 我们来自同一个世界，我们都有自己的梦想，我们都不曾放弃 我们来自同一个世界，我们都有自己的梦想，我们都不曾放弃</div><div class="box_text1">we are come from a world,we have us dream,wo never give up us deram;</div><div class="box_text1">we are come from a world,we have us dream,wo never give up us deram;</div></div><!-- 多行 --><div class="indexBox1"><div class="box_text4">我们来自同一个世界，我们都有自己的梦想，我们都不曾放弃 我们来自同一个世界，我们都有自己的梦想，我们都不曾放弃 我们来自同一个世界，我们都有自己的梦想，我们都不曾放弃</div><div class="box_text4 box_text5">we are come from a world,we have us dream,wo never give up us deram;</div><div class="box_text4 box_text6">we are come from a world,we have us dream,wo never give up us deram;</div></div>
</body></html>

-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：
display:-webkit-box;必须结合的属性，将对象作为弹性伸缩盒子模型显示。
-webkit-box-orient必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式。

但是为了兼容火狐浏览器，用css与js结合的方法来实现；

下面是实现的过程：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<style>.content {margin: 0 auto;width: 400px;line-height: 25px;margin-top: 100px;position: relative;height:auto;overflow: auto;}.contentHide{height: 50px;overflow:hidden;}.contentHide::after {content: "...";position: absolute;bottom: 0;right: 0;padding-left: 20px;/* background: -webkit-linear-gradient(left, transparent, #fff 55%);background: -o-linear-gradient(right, transparent, #fff 55%);background: -moz-linear-gradient(right, transparent, #fff 55%); */background: linear-gradient(to right, transparent, #fff 55%);}
</style><body><div class="content">我们来自同一个世界我们都有自己的梦想，我们不曾放弃;我们不曾放弃;我们不曾放弃;我们不曾放弃;我们不曾放弃;我们不曾放弃</div><div class="content">我们来自同一个世界我们都有自己的梦想，我们不曾放弃;我们不曾放弃</div><div class="content">我们来自同一个世界我们都有自己的梦想，我们不曾放弃</div>
</body>
<script>let ct=document.querySelectorAll(".content");for(let i=0;i<ct.length;i++){  //通过高度判断是否要添加超出隐藏的class名if(ct[i].offsetHeight>50){ct[i].classList.add('contentHide');}}</script>
</html>

还有一种方法是直接通过js截取前多少个字进行渲染，但这中方法误差大，

css强制换行和超出隐藏实现(单行和多行)相关推荐

css select换行,css强制换行和超出隐藏实现单行和多行（代码实例）
本篇文章给大家带来的内容是关于css强制换行和超出隐藏实现单行和多行(代码实例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 通俗点的解释: word-break:break-al ...
html隐藏换行,css强制换行和超出隐藏实现
一.强制换行 1 word-break: break-all; 只对英文起作用,以字母作为换行依据. 2 word-wrap: break-word; 只对英文起作用,以单词作为换行依据. 3 whi ...
css强制换行无效的终极解决方案
css强制换行无效的终极解决方案参考文章: (1)css强制换行无效的终极解决方案 (2)https://www.cnblogs.com/lantor/p/11644285.html 备忘一下.
css强制换行、禁止换行、超出两行或三行显示省略号...
强制换行 word-break: break-all; /*只对英文起作用,以字母作为换行依据. 如果该行末端有个很长的英文单词,它会把单词截断,一部分保持在行尾,另一部分换到下一行.*/word-w ...
css强制换行、强制不换行，溢出隐藏
css实现强制不换行/自动换行/强制换行在我们日常的编码中经常会遇到这段文字不可以换行,或者自动换行的需求.虽然这个功能在我们平时很常见但是我相信大家一定不会可以的去记住它吧.今天我们来学习一下如何 ...
史上最全css超出隐藏文章单行多行兼容
css超出隐藏关键属性. overflow:hidden; //超出的文本隐藏 text-overflow:ellipsis; //溢出用省略号显示 white-space:nowrap; //溢出不 ...
CSS 强制换行和禁止换行学习
强制换行 1.word-break: break-all; 只对英文起作用,以字母作为换行依据. 2.word-wrap: break-word; 只对英文起作用,以单词作为换行依据. ...
css强制换行和强制不换行
转自:http://chenfengming.cn/front-end/css-qiang-zhi-huan-xing-he-qiang-zhi-bu-huan-xing.html 中文情况下我们用 ...
css强制换行和禁止换行
强制换行 word-break: break-all; /* 只对英文起作用,以字母作为换行依据. */ word-wrap: break-word; /* 只对英文起作用,以单词作为换行依据. */ ...

css强制换行和超出隐藏实现(单行和多行)

css强制换行和超出隐藏实现(单行和多行)相关推荐

最新文章

热门文章