![75e99db59e5cffb332aa6d879aae44aa.png](https://i-blog.csdnimg.cn/blog_migrate/bcec5ed02ccc3f5105953a3f3f2b7ebb.jpeg)
作者 | Desiré
译者 | 苏本如,责编 | 郭芮
头图 | CSDN 下载自视觉中国
出品 | CSDN(ID:CSDNnews)
以下为译文:
各位网友,大家好!?
今天,我想在这里和大家分享一些我很晚时候才知道的一些CSS属性,在此之前,没有人告诉我这些属性的存在。
也许你们和我不一样,已经了解了这些属性。
闲话少说,让我们进入正题吧:?
![0d9c35fe7bca17e8cd7e96a24747904a.png](https://i-blog.csdnimg.cn/blog_migrate/77e806a8feb5c5a75887263df0840e14.jpeg)
禁用用户选中一个元素(element)的文本
使用属性user-select,并且将它的值设置为none,我们可以将一个元素的文本设置为不能被用户选中。
element {
-webkit-user-select: none; /* Safari */
-ms-user-select: none; /* IE 10+ and Edge */
user-select: none; /* Standard syntax */
}
![e7b29362e0699768ec8667328092ca8a.png](https://i-blog.csdnimg.cn/blog_migrate/7c1d3411584010e607fe709c4fcf2b46.jpeg)
当你不想一个元素的原始内容被复制时,可以使用这个属性。
![62024389623cb49cc0a88d76ac9db8e7.png](https://i-blog.csdnimg.cn/blog_migrate/a82b401af2e9384c44593b9e6565e300.jpeg)
更改选中文本的背景颜色
使用选择器::selection,可以更改选中文本的背景颜色:
::selection {
color: #ececec;
background: #222831;
}
![77bc12d7e30e0f837d85eabc859735c1.png](https://i-blog.csdnimg.cn/blog_migrate/8f63ec7de50c1ec351099142d8bfa911.jpeg)
当你使用这个属性时,注意使用良好的颜色对比度组合。
![c398642fe1547724931f95ab979d4e75.png](https://i-blog.csdnimg.cn/blog_migrate/745a7502d696cda3d4f5f88391fcb9ec.jpeg)
在不使用br的情况下将文本换行
使用属性white-space,并将它的值设置为pre-wrap或pre-line:
element {
white-space: pre-wrap; /*pre-wrap*/
white-space: pre-line; /*pre-line*/
}
![52fa82b25f1de0b126702cf16e8cd2f4.png](https://i-blog.csdnimg.cn/blog_migrate/bab335daeec3025c2741dd2111833988.jpeg)
![00d421515dd762f0b71093c5aa272122.png](https://i-blog.csdnimg.cn/blog_migrate/1493a0645b5ed6c17eb509ff6765057d.jpeg)
设置字与字之间的间距
这对你来说可能有点简单。但是直到我搜索这个需求时,我才知道有这个设置。
你可以使用word-spacing这个属性来设置文本中词与词之间的间隔。
element {
word-spacing: 6px; /* word spacing wow such */
}
![913f6e47033378a56c6844a8fbd71e8f.png](https://i-blog.csdnimg.cn/blog_migrate/02035db995c1ef3f563ce87ecfadd361.jpeg)
![e77d0e6e51ae7364e3da8eda4a35e51a.png](https://i-blog.csdnimg.cn/blog_migrate/b2455fd6a45e4079378aa50955d10a1e.jpeg)
在浏览器中隐藏难看的滚动条
我以前甚至不知道这是可以做到的。
要实现这个目的,你必须为不同的浏览器,准备不同的代码:
/* Hide scrollbar for Chrome, Safari, and Opera */
html::-webkit-scrollbar {
display: none;
}
/* Hide scrollbar for IE and Edge */
html {
-ms-overflow-style: none;
}
如果你禁用了滚动条,那么你需要确保提供上/下按钮和其他方便的导航选项。请注意,Firefox停止了对滚动条隐藏问题的支持,以上代码似乎是一个技巧,可以执行与我包含的其他代码相同的功能。
原文:https://dev.to/helleworld_/5-css-useful-properties-i-ignored-2930
本文为 CSDN 翻译,转载请注明来源出处。
![5472e3e8d41d6e309f9602bb583d4c77.png](https://i-blog.csdnimg.cn/blog_migrate/a62fde625ccf55e41f5570da77cbe521.jpeg)
![21d6e588f2acd6e7fab8b82deed3e9de.png](https://i-blog.csdnimg.cn/blog_migrate/23825f5ad10cc20f62b2c1765be8cb8a.jpeg)
☞我们想研发一个机器学习框架,6 个月后失败了
☞生产型机器学习已经没那么困难了?
☞视频 | 你不知道的"开源"60年秘史
☞GitHub标星10,000+,Apache项目ShardingSphere的开源之路
☞阿里技术专家告诉你,如何画出优秀的架构图?
☞加拿大API平台如何做到30%为中国明星项目?创业老兵这样说……