伪类::selection自定义文本选中时的样式(CSS3样式),CSS3的word-break单次换行
生活随笔
收集整理的這篇文章主要介紹了
伪类::selection自定义文本选中时的样式(CSS3样式),CSS3的word-break单次换行
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
1、::selection CSS3偽類自定義文本選中時的樣式
?
有的人在瀏覽網(wǎng)頁時,喜歡一邊選中文本一邊閱讀。在windows環(huán)境下,正常的文本選中應(yīng)該是深藍色背景白色文本的樣式。那么想要修改文本選中樣式,可以通過css中有這樣的一個偽類::selection用于自定義文本選中時的樣式設(shè)置。
::selection 選擇器匹配被用戶選取的文本內(nèi)容。只能向 ::selection 選擇器應(yīng)用少量 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、只顯示邊框一側(cè):
div {border:0;border-left:1px solid red; }?
創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯,堅持創(chuàng)作打卡瓜分現(xiàn)金大獎總結(jié)
以上是生活随笔為你收集整理的伪类::selection自定义文本选中时的样式(CSS3样式),CSS3的word-break单次换行的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 【Python】核酸结果统计难?复旦博士
- 下一篇: 【机器学习】快速入门简单线性回归 (SL