以下为译文:

各位网友,大家好!?

今天,我想在这里和大家分享一些我很晚时候才知道的一些CSS属性,在此之前,没有人告诉我这些属性的存在。

也许你们和我不一样,已经了解了这些属性。

闲话少说,让我们进入正题吧:?

1

禁用用户选中一个元素(element)的文本

使用属性user-select,并且将它的值设置为none,我们可以将一个元素的文本设置为不能被用户选中。

element {

  -webkit-user-select: none; /* Safari */

  -ms-user-select: none; /* IE 10+ and Edge */

  user-select: none; /* Standard syntax */

}

当你不想一个元素的原始内容被复制时,可以使用这个属性。

2

更改选中文本的背景颜色

使用选择器::selection,可以更改选中文本的背景颜色:

::selection {

  color: #ececec;

  background: #222831;

}

当你使用这个属性时,注意使用良好的颜色对比度组合。

3

在不使用br的情况下将文本换行

使用属性white-space,并将它的值设置为pre-wrap或pre-line:

element {

  white-space: pre-wrap; /*pre-wrap*/

  white-space: pre-line; /*pre-line*/

}

4

设置字与字之间的间距

这对你来说可能有点简单。但是直到我搜索这个需求时,我才知道有这个设置。

你可以使用word-spacing这个属性来设置文本中词与词之间的间隔。

element {

  word-spacing: 6px; /* word spacing wow such */

}

5

在浏览器中隐藏难看的滚动条

我以前甚至不知道这是可以做到的。

要实现这个目的,你必须为不同的浏览器,准备不同的代码:

/* 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 翻译,转载请注明来源出处。

点赞(0) 打赏

评论列表 共有 0 条评论

暂无评论

热门产品

历史上的今天:03月29日

热门专题

卓越综合高中|卓越综合高中
卓越综合高中
易捷尔高职单招|易捷尔高职单招,易捷尔高职单招培训,单招分数线,单招录取分数线,高职单招学校分数线
易捷尔高职单招
自考本科|自考本科有用吗,自考文凭,自考本科文凭,自考文凭有用吗,自考本科文凭有用吗,自考文凭承认吗
自考本科
大理科技管理学校|大理科技管理中等职业技术学校,大理市科技管理中等职业技术学校
大理科技管理学校
安徽开放大学|安徽开放大学报名,安徽开放大学报考,安徽开放大学,什么是安徽开放大学,安徽开放大学学历,安徽开放大学学费,安徽开放大学报名条件,安徽开放大学报名时间,安徽开放大学学历,安徽开放大学专业
安徽开放大学
天麻的功效与作用吃法|天麻的功效与作用,天麻的功效与作用吃法,天麻炖什么治头痛最好,天麻的功效与作用禁忌,天麻多少钱一斤,天麻的功效与作用吃法及禁忌,天麻怎么吃效果最好,天麻粉的功效与作用,天麻怎么吃
天麻的功效与作用吃法
小程序开发|微信小程序,小程序开发,小程序,小程序制作,微信小程序开发,小程序公司,小程序开发公司,分销,三级分销系统,分销系统
小程序开发
综合高中|云南综合高中,昆明综合高中,综合高中能考本一吗,综合高中和普通高中的区别,综合高中是什么意思,综合高中能参加全国统一高考吗,综合高中可以考哪些大学,综合高中的学籍是什么
综合高中

微信小程序

微信扫一扫体验

立即
投稿

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部