伪类::selection自定义文本选中时的样式(CSS3样式),CSS3的word-break单次换行

1、::selection CSS3伪类自定义文本选中时的样式

 

有的人在浏览网页时,喜欢一边选中文本一边阅读。在windows环境下,正常的文本选中应该是深蓝色背景白色文本的样式。那么想要修改文本选中样式,可以通过css中有这样的一个伪类::selection用于自定义文本选中时的样式设置。

::selection 选择器匹配被用户选取的文本内容只能向 ::selection 选择器应用少量 CSS 属性:color、background、cursor 以及 outline。

 

  <style>div::selection {background-color: red;color: #fff;}</style></head><body><div>blablabla,wakakakakakak.....</div></body>

选中文字的效果如下

兼容性:

 

 

 

2、web打断单词,在任意位置换行:

 

使用CSS3的  word-break:break-all; 属性

效果:

浏览器兼容性:

 

 

 

3、CSS样式使字体倾斜:   

 使用字体样式 font-style:italic;各浏览器都支持

 

 

4、只显示边框一侧

div {border:0;border-left:1px solid red;
}

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/553989.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

修改elementUI组件样式无效的多种解决方式

前言&#xff1a;vueelementUI项目开发中&#xff0c;经常遇到修改elementUI组件样式无效的问题&#xff0c; 原因&#xff1a;在vue组件中我们经常需要给style添加scoped来使得当前样式只作用于当前组件的节点。添加scoped之后&#xff0c;工作原理是将当前组件的节点添加一个…

CSS3 @media媒体查询 适配不同尺寸设备的响应式布局(清晰详解)

随着宽屏的不断普及&#xff0c;CSS3出现了media媒体查询技术 一、了解Media 相关知识 1、了解Media Queries Media Queries能在不同的条件下使用不同的样式&#xff0c;使页面在不同在终端设备下达到不同的渲染效果。其原理就是允许添加表达式用以媒体查询&#xff08;包括媒…

windows下mysql8.0-64的安装、完全卸载及注意事项(亲测),MySQL和SQL Server的简单区别

Windows 上安装 MySQL 1、现在zip安装包&#xff1a; 点击链接 https://cdn.mysql.com//Downloads/MySQL-8.0/mysql-8.0.11-winx64.zip 下载 zip 包。最新版本可以在 MySQL 下载 中下载中查看。 点击 Download 按钮进入下载页面&#xff0c;点击下图中的 No thanks, just star…

ChatGPT/GPT4+AI绘图+论文写作+编程结合到底有多强大?带你详细了解

ChatGPT在论文写作与编程方面具备强大的能力。无论是进行代码生成、错误调试还是解决编程难题&#xff0c;ChatGPT都能为您提供实用且高质量的建议和指导&#xff0c;提高编程效率和准确性。此外&#xff0c;ChatGPT是一位出色的合作伙伴&#xff0c;可以为您提供论文写作的支持…

vue-cli项目布署问题解决:空白页、静态资源文件404错误、refrenceError:promise未定义(部分浏览器不支持ES6语法)

&#xff08;前言&#xff1a;文章记录vue-cli项目打包使用IIS布署遇到的几个错误及解决方式&#xff09; 首先简单理解webpack打包&#xff1a; 个人理解&#xff1a;项目开发中我们构建 "低耦合高内聚" 的组件/模块来代码重用、降低项目复杂性&#xff0c;提升开发…

简单地使用webpack进行打包,一些常见打包错误

本质上&#xff0c;webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时&#xff0c;它会递归地构建一个依赖关系图(dependency graph)&#xff0c;其中包含应用程序需要的每个模块&#xff0c;然后将所有这些模块打包成一个或…

Vue-cli 项目优化归纳(打包、源码、用户体验)

前言&#xff1a;vue-cli项目开发打包部署后&#xff0c;存在问题有首次首页加载过慢&#xff0c;包括加载缓慢问题&#xff0c;需要进行vue项目优化。下面是对vue性能优化方法进行归纳&#xff0c;后面会对方法进行亲测。 主要包括&#xff1a;代码包打包优化、编码优化、用户…

JS中的prototype、__proto__与constructor,原型和原型链

理解原型的几个关键点&#xff1a; 1、所有的引用类型&#xff08;数组、函数、对象&#xff09;可以自由扩展属性&#xff08;除null以外&#xff09;; 2、所有的引用类型&#xff08;对象&#xff09;都有一个’_ _ proto_ _属性(也叫隐式原型&#xff0c;它是一个普通的对…

彻底理解cookie,session,token

转载自&#xff1a;https://www.cnblogs.com/moyand/p/9047978.html 发展史 1、很久很久以前&#xff0c;Web 基本上就是文档的浏览而已&#xff0c; 既然是浏览&#xff0c;作为服务器&#xff0c; 不需要记录谁在某一段时间里都浏览了什么文档&#xff0c;每次请求都是一个新…

硬盘基本知识(磁头、磁道、扇区、柱面),格式化容量计算

计算差&#xff1a; 在购买硬盘之后&#xff0c;细心的人会发现&#xff0c;在操作系统当中硬盘的容量与官方标称的容量不符&#xff0c;都要少于标称容量&#xff0c;容量越大则这个差异越大。标称40GB的硬盘&#xff0c;在操作系统中显示只有38GB&#xff1b;80GB的硬盘只有7…

常用校验码(奇偶校验码、海明校验码、CRC校验码)

转载自&#xff1a;https://www.cnblogs.com/VersionP1/p/7779251.html &#xff0c;作者&#xff1a; FunnyOne 常用校验码&#xff08;奇偶校验码、海明校验码、CRC校验码&#xff09; 一、奇偶校验码二、海明校验码三、CRC校验码 计算机系统运行时,各个部之间要进行数据交…

原码、反码、补码、移码

版权声明&#xff1a;本文为CSDN博主「刘水镜」的原创文章&#xff0c;遵循 CC 4.0 BY-SA 版权协议&#xff0c;转载请附上原文出处链接及本声明。 原文链接&#xff1a;https://blog.csdn.net/liushuijinger/article/details/7429197 原码&#xff1a; 如果机器字长为n&#…

【计算机系统】指令流水线

前言 流水线是指在程序执行时多条指令重叠进行操作的一种准并行处理实现技术。各部件同时处理是针对不同指令而言的&#xff0c;比如说&#xff0c;指令流水线把一条指令分为取指、分析和执行3部分&#xff0c;可以同时处理取指和分析&#xff0c;但是不能同时处理一个部…

Gantt(甘特图)与PERT(项目计划评审技术)图,项目关键路径和松弛时间

甘特图也叫做进度管理图。 他是一种简单的水平条形图&#xff0c;它以日历为基准描述项目任务&#xff0c;水平轴表示日历时间线&#xff0c;每一个线条表示一个任务&#xff0c;任务名称垂直的列在左边列中&#xff0c;图中的线条的起点和终点对应水平轴上的时间&#xff0c;…

学习阮一峰Javascript模块化编程,requireJS使用

使用背景NOW&#xff1a; 网站功能逐渐丰富&#xff0c;网页中的js也变得越来越复杂和臃肿&#xff0c;原有通过script标签来导入一个个的js文件这种方式已经不能满足现在互联网开发模式。 项目需要一个团队分工协作、进度管理、单元测试等等......开发者不得不使用软件工程的…

阮一峰的JavaScript 的 this 原理

一、问题的由来 学懂 JavaScript 语言&#xff0c;一个标志就是理解下面两种写法&#xff0c;可能有不一样的结果。 var obj {foo: function () {} };var foo obj.foo;// 写法一 obj.foo()// 写法二 foo()上面代码中&#xff0c;虽然obj.foo和foo指向同一个函数&#xff0c;…

计算机基础:IP地址,子网掩码,默认网关,DNS服务器

如图各项IP地址、子网掩码、默认网关、DNS服务器分别都代表什么意思 &#xff08;一&#xff09;IP地址 IP是32位二进制数据&#xff0c;通常以十进制表示&#xff0c;并以“.”分隔。IP地址是一种逻辑地地址&#xff0c;用来标识网络中一个个主机&#xff0c;IP有唯一性&#…

解决vue的{__ob__: observer}取值问题

vue编码中经常出现获取到的数据是&#xff1a;{__ob__: Observer} 格式的&#xff0c;详细如下 可能导致后续数据操作错误&#xff0c;如何获取其中的数值呢 解决方法如下&#xff1a; 将返回的数据data先转换为JSON字符串形式&#xff0c;然后再从字符串形式转换成JSON格式JS…

软考计算机基础:存储系统

软考计算机存储系统笔记&#xff1a; 存储器分类&#xff1a; 1、按存储位置分为内存和外存&#xff1b; 2、按存储材料分为磁存储&#xff08;使用磁存储介质&#xff09;、半导体存储&#xff08;分为双极型和MOS型&#xff0c;根据数据是否需要刷新可以分为静态SRAM存储器…

vscode统计代码行数,前端开发配置、快捷键使用

1、统计代码行数 使用场景是项目年终统计行数。 实现&#xff1a;在需要统计得文件夹右键“在文件夹中查找“ &#xff0c;后输入筛选得正则表达式 ^b*[^:b#/].*$ (注意右边小图标都点亮) 这里顺便将自己使用vscode进行前端开发环境配置归纳一下&#xff0c;便于自己以后快速…