css 一些会用到的小技巧

最新推荐文章于 2022-01-10 00:49:49 发布

原创最新推荐文章于 2022-01-10 00:49:49 发布 · 509 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css

前端开发小技巧专栏收录该内容

0 篇文章

订阅专栏

本文介绍了如何使用CSS实现文本的单行或多行溢出显示为省略号的效果，并展示了如何自定义input和textarea的placeholder属性。此外，还详细讲解了如何通过CSS伪元素设置滚动条的整体样式、轨道、拖动部分及边角等。

1.文字单行溢出显示省略号：

.over-hide{
    overflow:hidden;
 　　 white-space:nowrap; 
 　　 text-overflow:ellipsis; 　　
 }

2.文字多行溢出显示省略号

.over-hide{ 　　　　
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;    　　
}

3.设置input，textarea的placeholder 的属性：

::-webkit-input-placeholder{ font-size:10pt;}

4.设置滚动条样式：

 ::-webkit-scrollbar        滚动条整体部分，其中的属性有width,height,background,border（就和一个块级元素一样）等。


 ::-webkit-scrollbar-track         外层轨道。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果。

 ::-webkit-scrollbar-thumb               滚动条里面可以拖动的那部分

 ::-webkit-scrollbar-corner               边角

 ::-webkit-resizer                       定义右下角拖动块的样式