这五个有用的 CSS 属性完全被我忽视了
作者 | Desiré
译者 | 苏本如,责编 | 郭芮
头图 | CSDN 下载自视觉中国
出品 | CSDN(ID:CSDNnews)
以下为译文:
各位网友,大家好!????
今天,我想在这里和大家分享一些我很晚时候才知道的一些CSS属性,在此之前,没有人告诉我这些属性的存在。
也许你们和我不一样,已经了解了这些属性。
闲话少说,让我们进入正题吧:????
禁用用户选中一个元素(element)的文本
使用属性user-select,并且将它的值设置为none,我们可以将一个元素的文本设置为不能被用户选中。
element {-webkit-user-select: none; /* Safari */-ms-user-select: none; /* IE 10+ and Edge */user-select: none; /* Standard syntax */
}
当你不想一个元素的原始内容被复制时,可以使用这个属性。
更改选中文本的背景颜色
使用选择器::selection,可以更改选中文本的背景颜色:
::selection {color: #ececec;background: #222831;
}
当你使用这个属性时,注意使用良好的颜色对比度组合。
在不使用br的情况下将文本换行
使用属性white-space,并将它的值设置为pre-wrap或pre-line:
element {white-space: pre-wrap; /*pre-wrap*/white-space: pre-line; /*pre-line*/
}
设置字与字之间的间距
这对你来说可能有点简单。但是直到我搜索这个需求时,我才知道有这个设置。
你可以使用word-spacing这个属性来设置文本中词与词之间的间隔。
element {word-spacing: 6px; /* word spacing wow such */
}
在浏览器中隐藏难看的滚动条
我以前甚至不知道这是可以做到的。
要实现这个目的,你必须为不同的浏览器,准备不同的代码:
/* 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 翻译,转载请注明来源出处。
更多精彩推荐
☞我们想研发一个机器学习框架,6 个月后失败了
☞生产型机器学习已经没那么困难了?
☞视频 | 你不知道的"开源"60年秘史
☞GitHub标星10,000+,Apache项目ShardingSphere的开源之路
☞阿里技术专家告诉你,如何画出优秀的架构图?
☞加拿大API平台如何做到30%为中国明星项目?创业老兵这样说……
你点的每个“在看”,我都认真当成了喜欢
这五个有用的 CSS 属性完全被我忽视了相关推荐
- css修改select选择框option被选中的背景颜色_这五个有用的 CSS 属性完全被我忽视了...
作者 | Desiré译者 | 苏本如,责编 | 郭芮头图 | CSDN 下载自视觉中国出品 | CSDN(ID:CSDNnews) 以下为译文: 各位网友,大家好!?今天,我想在这里和大家分享一些我 ...
- CSS入门-五个简单,但有用的CSS属性
今天说的这5个CSS属性,你可能会很熟悉,但是你可能会很少会去使用.这个教程所讲得不是关于CSS3的属性,而是依旧使用CSS2属性来说明,这些属性广泛的被各种浏览器所支持:clip,min-heigh ...
- 你应该知道的25个非常有用的CSS技巧
在我们的前端CSS编码当中,经常要设置特殊的字体效果,边框圆角等等,还要考虑兼容性的问题, CSS网页布局,说难,其实很简单.说它容易,往往有很多问题困扰着新手,在中介绍了非常多的技巧,这些小技巧与知 ...
- [css] 你有用过animation-fill-mode属性吗?它有什么应用场景
[css] 你有用过animation-fill-mode属性吗?它有什么应用场景 动画播放完成之后的动作,比如可以定义动画播放完成之后回到初始状态 个人简介 我是歌谣,欢迎和大家一起交流前后端知识. ...
- CSS 3 CSS 属性 3.4 字体
CSS 文章目录 CSS 3 CSS 属性 3.4 字体 3.4.1 字体选择很重要 3.4.2 通用字体族 3.4.3 Serif 和 Sans-serif 字体之间的区别 3.4.4 一些字体的例 ...
- css超过两行显示为..._使用这些不太常用的CSS属性,布局效率上又提高了一个层次...
有很多CSS属性,有些人不了解,或者他们了解它们,但是忘记在需要时使用它们.其实,有时候我们用 JavaScript 来实某些交互,CSS 一个属性就能搞定了,这可以大大节约我们编码的时间. 作为前端 ...
- CSS属性display:inline-block使用揭秘
本文向大家描述一下CSS属性display:inline-block的用法,它可以将对象呈递为内联对象,但是对象的内容作为块对象呈递,旁边的内联对象会被呈递在同一行内,允许空格.但对于这个属性不是所有 ...
- css 属性选择器笔记
1.基本选择器: eg: *{margin:0;padding:0}p{color:black}.content{background:red;}#intro{padding-left:2em;} 2 ...
- 理解 CSS 属性值语法
本文转载自:众成翻译 链接:http: //www.zcfy.cc/article/390 万维网联盟(W3C) 使用了一套特别的语法来定义 CSS 的属性值,能让所有的 CSS 属性都用.如果你曾看 ...
最新文章
- 教小学妹学算法:诺基亚引出的动态规划问题
- ServletContext_功能_获取文件服务器路径
- Android--控件属性汇总
- Qt实践录:串口调试助手
- ef 批量保存 oracle,mybatis-oracle与mysql批量添加
- JavaScript命名冲突不可避免?
- VMware在NAT模式下配置静态IP
- MSSQL表别名使用注意事项
- 几款优秀的Windows密码抓取工具
- 百日计划:第一周,《七周成为数据分析师》课程近万字总结
- 微信公众号认证流程-微信公众号使用教程3
- ai 分形艺术_作为艺术家的AI?
- python生成一维数组_如何用python随机产生一个一维数组?
- vmware 虚拟机nat连接,局域网访问
- 目标检测中的Anchor-free回顾
- 常用技巧精选(一)尺取法
- *用jQuery实现星星好评wink*~
- 分享 2021 豆瓣年度榜单电影/图书
- 阿里云高并发解决方案
- 从事网络安全工作一定要科班出身吗?