css select换行,css强制换行和超出隐藏实现单行和多行（代码实例）

本篇文章给大家带来的内容是关于css强制换行和超出隐藏实现单行和多行(代码实例)，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

通俗点的解释：

word-break:break-all;只对英文起作用，以字母作为换行依据

word-wrap:break-word; 只对英文起作用，以单词作为换行依据

white-space:pre-wrap; 只对中文起作用，强制换行

white-space:nowrap; 强制不换行，都起作用

white-space:nowrap; overflow:hidden; text-overflow:ellipsis;不换行，超出部分隐藏且以省略号形式出现(部分浏览器支持)

案例：案例里面有注释，

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结合的方法来实现；

下面是实现的过程：

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;i

if(ct[i].offsetHeight>50)

{

ct[i].classList.add('contentHide');

}

}

以上就是对css强制换行和超出隐藏实现单行和多行(代码实例)的全部介绍，如果您想了解更多有关CSS视频教程，请关注PHP中文网。