伪类::selection自定义文本选中时的样式(CSS3样式),CSS3的word-break单次换行
生活随笔
收集整理的這篇文章主要介紹了
伪类::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; }?
創作挑戰賽新人創作獎勵來咯,堅持創作打卡瓜分現金大獎總結
以上是生活随笔為你收集整理的伪类::selection自定义文本选中时的样式(CSS3样式),CSS3的word-break单次换行的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 【Python】核酸结果统计难?复旦博士
- 下一篇: CSS 基本样式