css如何强制换行和超出隐藏实现？

互联网/前端

103次点击 · 1264天前 · 年轮

1条回答我要回复

灯塔1264天前

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


通俗点的解释：
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 >
<div >
我们来自同一个世界，我们都有自己的梦想，我们都不曾放弃我们来自同一个世界，我们都有自己的梦想，我们都不曾放弃我们来自同一个世界，我们都有自己的梦想，我们都不曾放弃
</div>
<div >
we are come from a world,we have us dream,wo never give up us deram;
</div>
<div >
we are come from a world,we have us dream,wo never give up us deram;
</div>
</div>

<div >
<div >
我们来自同一个世界，我们都有自己的梦想，我们都不曾放弃我们来自同一个世界，我们都有自己的梦想，我们都不曾放弃我们来自同一个世界，我们都有自己的梦想，我们都不曾放弃
</div>
<div >
we are come from a world,we have us dream,wo never give up us deram;
</div>
<div >
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 >我们来自同一个世界我们都有自己的梦想，我们不曾放弃;我们不曾放弃;我们不曾放弃;我们不曾放弃;我们不曾放弃;我们不曾放弃</div>
<div >我们来自同一个世界我们都有自己的梦想，我们不曾放弃;我们不曾放弃</div>
<div >我们来自同一个世界我们都有自己的梦想，我们不曾放弃</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截取前多少个字进行渲染，但这中方法误差大