本篇文章给大家带来的内容是关于css强制换行和超出隐藏实现单行和多行（代码实例），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
登录后复制
通俗点的解释：
word-break:break-all;只对英文起作用，以字母作为换行依据
word-wrap:break-word; 只对英文起作用，以单词作为换行依据
white-space:pre-wrap; 只对中文起作用，强制换行
white-space:nowrap; 强制不换行，都起作用
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;不换行，超出部分隐藏且以省略号形式出现（部分浏览器支持）
案例：案例里面有注释，
nbsp;html>Document 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; }
我们来自同一个世界，我们都有自己的梦想，我们都不曾放弃 我们来自同一个世界，我们都有自己的梦想，我们都不曾放弃 我们来自同一个世界，我们都有自己的梦想，我们都不曾放弃
we are come from a world,we have us dream,wo never give up us deram;
we are come from a world,we have us dream,wo never give up us deram;
我们来自同一个世界，我们都有自己的梦想，我们都不曾放弃 我们来自同一个世界，我们都有自己的梦想，我们都不曾放弃 我们来自同一个世界，我们都有自己的梦想，我们都不曾放弃
we are come from a world,we have us dream,wo never give up us deram;
we are come from a world,we have us dream,wo never give up us deram;
登录后复制
-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：
display:-webkit-box;必须结合的属性，将对象作为弹性伸缩盒子模型显示。
立即学习“前端免费学习笔记（深入）”；
-webkit-box-orient必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式。
但是为了兼容火狐浏览器，用css与js结合的方法来实现；
下面是实现的过程：
nbsp;html>Document .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%); }我们来自同一个世界我们都有自己的梦想，我们不曾放弃;我们不曾放弃;我们不曾放弃;我们不曾放弃;我们不曾放弃;我们不曾放弃
我们来自同一个世界我们都有自己的梦想，我们不曾放弃;我们不曾放弃
我们来自同一个世界我们都有自己的梦想，我们不曾放弃
let ct=document.querySelectorAll(".content"); for(let i=0;i50) { ct[i].classList.add('contentHide'); } }
登录后复制
以上就是对css强制换行和超出隐藏实现单行和多行（代码实例）的全部介绍，如果您想了解更多有关CSS视频教程，请关注PHP中文网。
以上就是css强制换行和超出隐藏实现单行和多行（代码实例）的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/3120868.html
