伪类::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,一经查实,立即删除!

相关文章

如何打造高大上的微信朋友圈 打造微信高逼格朋友圈教程

1、注意发朋友圈的频率&#xff0c;单次动态不要超过两条 学会给自己的朋友圈排期看起来简单&#xff0c;其实真的做起来非常难&#xff0c;这就和每天坚持做十个俯卧撑和写文章一样难&#xff0c;很少有人能够坚持下来&#xff0c;但是坚持下来的人&#xff0c;往往都收获了惊…

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

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

火狐浏览器怎么样 火狐浏览器都有哪些优缺点

火狐浏览器是一个自由及开放源代码的网页浏览器&#xff0c;支持主流的全部系统&#xff0c;最近不少朋友问我火狐浏览器怎么样?作为一名火狐浏览器的用户&#xff0c;在这边给大家介绍火狐浏览器的各种优缺点&#xff0c;赶紧搬好小椅子&#xff0c;介绍开始啦。 火狐浏览器…

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

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

腾讯视频怎么设置全速下载模式

腾讯视频界面非常简洁友好&#xff0c;是播放器家园网小编一直推荐的软件&#xff0c;今天给大家重点分享“腾讯视频怎么设置全速下载模式”。腾讯视频播放器是播放器家园网小编用过最好用的一款&#xff0c;在这里能够不同类型的电视剧和电影&#xff0c;都是采用了4K级高清画…

浅谈Normalize.css

转载自简书&#xff1a;https://www.jianshu.com/p/3d21d1932aa0 Normalize.css只是一个很小的css文件&#xff0c;但它在默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的css reset&#xff0c;Normalize.css是一种现代的&#xff0c;为HTML5准备的优质替代方案…

傲游浏览器怎么创建笔记 傲游浏览器笔记创建方法分享

和某些浏览器不同&#xff0c;傲游浏览器中的笔记功能拥有极清爽、极简约、极免费等三大特性&#xff0c;并因此获得了不少用户的青睐。那么&#xff0c;在傲游浏览器中该怎么创建笔记呢?下面小编就来分享一下傲游浏览器笔记创建的方法&#xff0c;有需要的朋友可以稍作参考。…

固定布局(fixed layout)、流体布局(fluid layout)、弹性布局(elastic layout)、响应布局(responsive layout)理解和技巧归纳

关于web页面布局&#xff0c;首先简单了解一下固定布局(fixed layout)、流体布局(fluid layout)、弹性布局(elastic layout)、响应布局(responsive layout)和相应的使用技巧&#xff1f; 固定布局(fixed layout) 固定布局&#xff0c;例如豆瓣网&#xff0c;无论如何change浏览…

win7电脑0x000007b蓝屏怎么办

win7电脑0x000007b蓝屏怎么办&#xff1f;0x000007b蓝屏是什么意思?当电脑出现蓝屏&#xff0c;其蓝屏代码是0x000007b&#xff0c;通常是由于bios设置中的硬盘模式与当前系统不符合所造成。大家可以参考小编给出的本篇教程将模式调为“AHCI”&#xff0c;尝试解决。 1、重启…

整理软件行业职位介绍(PM,RD,FE,UE,UI,QA,OP,DBA,BRD,MRD, PRD,FSD等)、组织结构、职责

职位概览缩写 GM(General Manager)总经理 VP(Vice President)副总裁 FVP(First Vice President)第一副总裁 AVP(Assistant Vice President)副总裁助理 CEO(Chief Executive Officer)首席执行官&#xff0c;类似总经理、总裁&#xff0c;是企业的法人代表。 COO(Chief Ope…

谷歌浏览器怎么查看网页源代码 Chrome浏览器网页源代码查看技巧分享

凭借简单、高效的使用体验&#xff0c;谷歌开发的网页浏览器“Chrome”在国内也不乏粉丝&#xff0c;甚至一度被视为装机必备的软件之一。但其操作方式和界面设计&#xff0c;与国产浏览器略有不同!那么&#xff0c;谷歌浏览器要怎么查看网页源代码?让我们一起来了解一下。 方…

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…

vue中使用highCharts的drilldown钻取图、3D等图

<!-- 可以使用highcharts的CDN资源 --> <!-- 钻取图依赖jquery.js和highcharts.js ,有顺序要求 --> <script src"http://cdn.highcharts.com.cn/highcharts/highcharts.js"></script> <script src"http://cdn.highcharts.com.cn/…

vue-router进阶:路由使用归纳、路由导航守卫、导航守卫解析流程、

一、定义和理解 导航守卫的作用&#xff1a;vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。 》》项目中应用场景举例&#xff1a;路由页面跳转时候进行登陆验证&#xff1b;路由跳转判断&#xff1b; 有多种机会植入路由导航过程中&#xff1a;全局路由, 单…

谷歌浏览器内存不足 Chrome浏览器内存释放技巧分享

谷歌Chrome浏览器内存占用过高的问题一直困扰着不少使用者&#xff0c;除了少用占用内存的扩展插件及控制打开的标签页数量外&#xff0c;还有不少方法可以解决这一问题!下面小编就来分享一个快速释放Chrome浏览器内存的小技巧&#xff0c;小伙伴们可不要错过了。 方法步骤 在…

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

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

月亮的传说故事

古时候&#xff0c;有个地方夜晚总是漆黑一片&#xff0c;天空就像笼罩着一块黑布。因为在这里&#xff0c;月亮从来没有升起过&#xff0c;星星也不闪烁。其实在上帝创造世界时&#xff0c;晚上还是很明亮的。 有一次&#xff0c;有四个年轻人离开了这片国土&#xff0c;来到…

mockjs语法规范、设置mockjs拦截响应时间、Mock.Random占位符生成随机数据

首先回顾vue-cli项目中使用mockjs步骤&#xff1a; 1、安装mockjs、axios&#xff08;http请求库&#xff09;&#xff1b; cnpm install mockjs axios --save 2、在项目中新建一个mock.js文件&#xff0c;用于定义接口返回的数据&#xff1b; const Mock require(mockjs) …

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

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

优酷视频APP的缓存视频在哪里

针对喜爱刷剧的网民&#xff0c;要是有空余就爱播放视频&#xff0c;但是视频会应用很多的总流量&#xff0c;这应该怎么办呢?我们可以在有Wifi的地区把视频缓存到手机里&#xff0c;随后在沒有wifi的地区看缓存文件的含有就可以了。下边就一起来看一下怎样缓存文件优酷吧。 …