介绍 & lt; !—
空白:正常| |以前nowrap |} pre-wrap | pre-line |继承;
空白:设置如何处理元素内的空白;
单词分割:正常|打破所有|把所有;
单词分割:用来标明怎么样进行单词内的断句
自动换行:正常| break-word;
自动换行:用来标明是否允许浏览器在单词内进行断句,这是为了防止当一个字符串太长而找不到它的自然断句点时产生溢出现象。
文本溢出:省略;让多出的内容以省略号…来表达。但是这个属性主要用于IE等浏览器,歌剧浏览器用-o-text-overflow:省略;而Firefox浏览器没有这个功能,多出的内容只能隐藏起来。
显示:-webkit-box;//将对象作为弹性伸缩盒子模型显示。
-webkit-box-orient:垂直;//从上到下垂直排列子元素(设置伸缩盒子的子元素排列方式)
-webkit-line-clamp: 2;//这个属性不是css的规范属性,需要组合上面两个属性,表示显示的行数。/* autoprefixer: *//* autoprefixer:> & lt; !DOCTYPE html>
& lt; html lang=癳n"祝辞
& lt; head>
& lt;元charset=癠TF-8"祝辞
& lt;元名称=皏iewport"内容=翱矶?设备宽度,初始=1.0,比;
& lt;元http-equiv=癤-UA-Compatible"内容=癷e=edge"比;
& lt; title> Document
& lt; style>
身体{
宽度:100%;
保证金:200 px 20%;
}
.indexBox1 {
宽度:60%;
身高:100 px;
字体大小:14 px;
颜色:# ffffff;
显示:flex;
justify-content:空间;
}/*单行*/.indexBox1 .box_text1 {
宽度:100 px;
身高:98 px;
背景:灰色;
溢出:隐藏;
文本溢出:省略;
空白:nowrap;}/*单词分割:正常;
自动换行:没有;*/}/*多行*/.indexBox1 .box_text4 {
宽度:100 px;
身高:98 px;
背景:黑色;
溢出:隐藏;
文本溢出:省略;
显示:-webkit-box;
-webkit-box-orient:垂直;/* Firefox */显示:-moz-box;
*//* autoprefixer:
-moz-box-orient:垂直;/* autoprefixer:> <李> & lt; !DOCTYPE html>
& lt; html lang=癳n"祝辞
& lt; head>
& lt;元charset=癠TF-8"祝辞
& lt;元名称=皏iewport"内容=翱矶?设备宽度,初始=1.0,比;
& lt;元http-equiv=癤-UA-Compatible"内容=癷e=edge"比;
& lt; title> Document
& lt;/head>
& lt; style>
.content {
保证金:0汽车;
宽度:400 px;
行高:25 px;
margin-top: 100 px;
位置:相对;
高度:汽车;
溢出:汽车;
}
.contentHide {
高度:50 px;
溢出:隐藏;
}
{后.contentHide::
内容:“……“
位置:绝对的;
底部:0;
右:0;
padding-left: 20 px;/*背景:-webkit-linear-gradient(左、透明、# fff 55%);
背景:-o-linear-gradient(透明,# fff 55%);
背景:-moz-linear-gradient(透明,# fff 55%);*/背景:线性渐变(向右、透明、# fff 55%);
}
& lt;/style>
& lt; body>
类& lt; p=癱ontent"在我们来自同一个世界我们都有自己的梦想,我们不曾放弃;我们不曾放弃;我们不曾放弃;我们不曾放弃;我们不曾放弃;我们不曾放弃& lt;/p>
类& lt; p=癱ontent"在我们来自同一个世界我们都有自己的梦想,我们不曾放弃;我们不曾放弃& lt;/p>
类& lt; p=癱ontent"在我们来自同一个世界我们都有自己的梦想,我们不曾放弃& lt;/p>
& lt;/body>
& lt; script>
让ct=document.querySelectorAll (“.content");
(让我=0;i 50)
{
ct[我].classList.add (& # 39; contentHide& # 39;);
}
}
& lt;/script>
& lt;/html>
这篇文章将为大家详细讲解有关css强制换行和超出隐藏实现单行和多行的方法,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果,它需要组合其他的WebKit属性。常见结合属性:
<李>显示:-webkit-box;必须结合的属性,将对象作为弹性伸缩盒子模型显示。
<李>-webkit-box-orient必须结合的属性,设置或检索伸缩盒对象的子元素的排列方式。
但是为了兼容火狐浏览器,用css与js结合的方法来实现;
下面是实现的过程:
关于css强制换行和超出隐藏实现单行和多行的方法就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看的到。
