css标签定义不可修改文本,推荐5个好用但却经常被忽略的css属性(禁止选中文本、更改选中文本的背景色、不用br换行、字体间距、隐藏滚动条)...

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

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

element {

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

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

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

}

image

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

02 更改选中文本的背景颜色

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

::selection {

color: #ececec;

background: #222831;

}

image

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

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

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

element {

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

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

}

image

04 设置字与字之间的间距

这对你来说可能有点简单。但是直到我搜索这个需求时，我才知道有这个设置。你可以使用word-spacing这个属性来设置文本中词与词之间的间隔。

element {

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

}

image

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

我以前甚至不知道这是可以做到的。要实现这个目的，你必须为不同的浏览器，准备不同的代码：

/* Hide scrollbar for Chrome, Safari, and Opera */

html::-webkit-scrollbar {

display: none;

}

/* Hide scrollbar for IE and Edge */

html {

-ms-overflow-style: none;

}

如果你禁用了滚动条，那么你需要确保提供上/下按钮和其他方便的导航选项。

请注意，Firefox停止了对滚动条隐藏问题的支持，以上代码似乎是一个技巧，可以执行与我包含的其他代码相同的功能。

css标签定义不可修改文本,推荐5个好用但却经常被忽略的css属性(禁止选中文本、更改选中文本的背景色、不用br换行、字体间距、隐藏滚动条)...相关推荐

Spark：HanLP+Word2Vec+LSH实现文本推荐(kotlin)
Spark:HanLP+Word2Vec+LSH实现文本推荐(kotlin) 文本推荐的基本流程就是首先对目标本文进行关键词提取,接着把关键词转成词向量,再计算词向量的相似性进行推荐.这三个步骤都有现 ...
dw中css规则定义中文,Dreamweaver编辑CSS规则
核心提示:本教程为大家介绍一下Dreamweaver编辑CSS规则,希望对大家有帮助. 本教程为大家介绍一下Dreamweaver编辑CSS规则,希望对大家有帮助. 一.在"CSS样式&qu ...
＜ pre ＞标签定义预格式化的文本
HTML < pre > 标签 - - - 定义预格式化的文本标签中的文本会保留空格和换行符 <!DOCTYPE html> <html><head> ...
基于vue简单封装的iframe插件，可修改样式，隐藏滚动条
最近有空,就抽空把以前做过的公司业务组件慢慢抽离出来做成插件,也算是对近年来的技术方面做一个总结吧. 今天要写的是一个用vue-jsx封装的iframe插件,可修改iframe中的样式,隐藏滚动条,默 ...
css里td自带什么属性,关于css标签的属性（text文本属性，背景background，表格标签table，td标签属性）...
简介这篇文章主要介绍了关于css标签的属性(text文本属性,背景background,表格标签table,td标签属性)以及相关的经验技巧,文章约1129字,浏览量216,点赞数4,值得参考! te ...
浏览器滚动条修改样式隐藏滚动条
处理浏览器默认的滚动条设置滚动条 // 设置滚动条达到出现标准才出现 .scroll {height:300px;width:70px;overflow:auto; } // 宽度(width)和 ...
CSS中定义多个链接样式,在CSS中定义【导航栏】超链接样式
1.案例css代码 .divcss5 a:link{ color:#F00}/* 链接默认为红色 */ .divcss5 a:hover{ color:#000}/* 鼠标悬停黑色 */ .divcs ...
DreamWeaver CS5 CSS规则定义面板记录
Dreamweaver 中CSS定义的面板可以实现对CSS的编辑,这里对其中几项不是很熟悉的作下笔记: 因为时间珍贵,所以很大一部分都是转自网络的内容.而且对于这些内容,别人已经整理的很好了,没有必要 ...
css txt-aline,CSS规则定义.doc
CSS规则定义 CSS规则定义一.类型 Font-family:字体 font-size:字体大小: xx-small 最小 x-small 较小 small 小 medium 正常(默认值) la ...

css标签定义不可修改文本,推荐5个好用但却经常被忽略的css属性(禁止选中文本、更改选中文本的背景色、不用br换行、字体间距、隐藏滚动条)...

css标签定义不可修改文本,推荐5个好用但却经常被忽略的css属性(禁止选中文本、更改选中文本的背景色、不用br换行、字体间距、隐藏滚动条)...相关推荐

最新文章

热门文章