伪类::selection自定义文本选中时的样式（CSS3样式），CSS3的word-break单次换行-CSDN博客

本文链接：https://blog.csdn.net/zhouzuoluo/article/details/89434519

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;
}