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

àì夳堔傛蜴生んèń 2021-09-19 01:04 174阅读 0赞

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

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

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

选中文字的效果如下

![20190421161526536.png][]

兼容性：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6dW9sdW8_size_16_color_FFFFFF_t_70][]

## 2、web打断单词，在任意位置换行： ##

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

效果：

![20190421162128382.png][]

浏览器兼容性：

![20190421162301703.png][]

## ##

### **3、CSS样式使字体倾斜:**    ###

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

**4、只显示边框一侧：**

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

[20190421161526536.png]: /images/20210726/bb47886e399049d0a8edf803247faa17.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6dW9sdW8_size_16_color_FFFFFF_t_70]: /images/20210726/cb60305b49834e22815a7b3e125917c8.png
[20190421162128382.png]: /images/20210726/241a18e27f6d4447b62e15caede41038.png
[20190421162301703.png]: /images/20210726/c162e1f562b04c41bb58f5fea29641eb.png