文章來(lái)源于公眾號(hào):前端瓶子君
作者 | Desiré
譯者 | 蘇本如,責(zé)編 | 郭芮
出品 | CSDN(ID:CSDNnews)
各位網(wǎng)友,大家好! 今天,我想在這里和大家分享一些我很晚時(shí)候才知道的一些CSS屬性,在此之前,沒(méi)有人告訴我這些屬性的存在。 也許你們和我不一樣,已經(jīng)了解了這些屬性。 閑話少說(shuō),讓我們進(jìn)入正題吧:
1. 禁用用戶選中一個(gè)元素(element)的文本
使用屬性 user-select
,并且將它的值設(shè)置為 none
,我們可以將一個(gè)元素的文本設(shè)置為不能被用戶選中。
element {
-webkit-user-select: none; /* Safari */
-ms-user-select: none; /* IE 10+ and Edge */
user-select: none; /* Standard syntax */
}
當(dāng)你不想一個(gè)元素的原始內(nèi)容被復(fù)制時(shí),可以使用這個(gè)屬性。
2. 更改選中文本的背景顏色
使用選擇器::selection
,可以更改選中文本的背景顏色:
::selection {
color: #ececec;
background: #222831;
}
當(dāng)你使用這個(gè)屬性時(shí),注意使用良好的顏色對(duì)比度組合。
3. 在不使用br的情況下將文本換行
使用屬性white-space
,并將它的值設(shè)置為pre-wrap
或pre-line
:
element {
white-space: pre-wrap; /*pre-wrap*/
white-space: pre-line; /*pre-line*/
}
4. 設(shè)置字與字之間的間距
這對(duì)你來(lái)說(shuō)可能有點(diǎn)簡(jiǎn)單。但是直到我搜索這個(gè)需求時(shí),我才知道有這個(gè)設(shè)置。
你可以使用word-spacing
這個(gè)屬性來(lái)設(shè)置文本中詞與詞之間的間隔。
element {
word-spacing: 6px; /* word spacing wow such */
}
5. 在瀏覽器中隱藏難看的滾動(dòng)條
我以前甚至不知道這是可以做到的。
要實(shí)現(xiàn)這個(gè)目的,你必須為不同的瀏覽器,準(zhǔn)備不同的代碼:
/* Hide scrollbar for Chrome, Safari, and Opera */
html::-webkit-scrollbar {
display: none;
}
/* Hide scrollbar for IE and Edge */
html {
-ms-overflow-style: none;
}
如果你禁用了滾動(dòng)條,那么你需要確保提供上/下按鈕和其他方便的導(dǎo)航選項(xiàng)。請(qǐng)注意,F(xiàn)irefox停止了對(duì)滾動(dòng)條隱藏問(wèn)題的支持,以上代碼似乎是一個(gè)技巧,可以執(zhí)行與我包含的其他代碼相同的功能。
以上就是W3Cschool編程獅
關(guān)于五個(gè)有用的 CSS 屬性被我忽視了的相關(guān)介紹了,希望對(duì)大家有所幫助。