css多行超出显示点_实用的css技巧代码片段

css

代码

技巧

片段

超实用，喜欢就收藏！

前言

生活需要总结，需要不断地发现自己的缺陷然后找到好的方法，改之。古人说好记性不如烂笔头，人终归是会遗忘一些事情的，哪怕它曾经深深地印在你的脑海，久久挥之不去，经过时间的洗涤，一切都会回到最初的那个时刻。

还记得你上次写的令自己引以为豪的css样式吗？?，也许你记得，但模糊了不是？？？所以还是乖乖地拿起你的电脑，愉快地一点点敲下来，记录一遍吧！这篇文章会记录自己时常用到的css片段，使用这些css可以帮助我们解决许多实际问题。

1标题内容

    浮动给我们的代码带来的麻烦，想必不需要多说，我们会用很多方式来避免这种麻烦，其中我觉得最方便也是兼容性最好的一种是....

2垂直水平居中

在css的世界里水平居中比垂直居中来的简单一些，经过了多年的演化，依然没有好的方式来让元素垂直居中(各种方式各有优缺点，但都不能达到兼容性好，破坏力小的目标)。

    以下是几种常见的实现方式

绝对定位方式且已知宽高

绝对定位 ＋ 未知宽高 ＋ translate

flex 轻松搞定水平垂直居中( 未知宽高)

3文本末尾添加省略号

当文本的内容超出容器的宽度的时候，我们希望在其默认添加省略号以达到提示用户内容省略显示的效果。

宽度固定，适合单行显示...

宽度不固定，适合多行以及移动端显示

4制造文本的模糊效果

    当我们希望给文本制造一种模糊效果感觉的时候，可以这样做

5动画实现简洁loading效果

    非常简洁的loading效果

6自定义文本选中样式

默认情况下，我们在网页上选中文字的时候，会给选中的部分一个深蓝色背景颜色，如果我们想自己定制被选中的部分的样式呢？

7首字下沉

    要实现类似word中首字下沉的效果可以使用以下代码

8屏蔽Webkit移动浏览器中元素高亮效果

    在访问移动网站时，你会发现，在选中的元素周围会出现一些灰色的框框，使用以下代码屏蔽这种样式

精彩推荐你该知道滥用div的危害性！前端HTML面试题：测一测你的基础？100+套热门游戏特效源码

听说转发文章

会给你带来好运