css控制字符数量换行 |css 表头固定 谷歌

p {
/* 控制最大字符数量 */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
p {
/* 控制最大行数 */
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}

以上代码分别对应了两种不同的方式来控制字符数量和行数。对于字符数量的控制，大家使用了overflow、text-overflow和white-space三个属性。其中overflow指定了如果内容溢出元素框的处理方式，hidden表示隐藏溢出部分；text-overflow则指定了如何处理被截断的文本，这里大家使用了省略号(…)来代表被截断的文本；而white-space则指定了如何处理元素中的空格，nowrap表示不进行换行。

而对于行数的控制，大家则使用了-webkit-box、-webkit-line-clamp和-webkit-box-orient这三个以-webkit为前缀的属性。这是因为控制行数的属性目前只是在webkit浏览器中（包括Chrome、Safari等）才有效。其中-webkit-box指定了元素的显示方式为盒子模型；-webkit-line-clamp则指定了显示的行数，这里大家将其设置为3行；而-webkit-box-orient则指定了盒子模型的方向为垂直方向。

通过以上代码的使用，大家可以轻松地控制网页中的字符数量和行数，让网页内容更加美观易读。如果你对CSS的掌握更加深入，那么在实现这些效果的过程中，你还可以根据自己的需求加入更多的特别效果，从而让你的网页更加个性化和独特。