CSS 首字母字型變大時下劃線不對齊的解決方法

2021-07-29 09:59:03 字數 1231 閱讀 3534

首先使用了 ::first-letter偽元素的選擇器,將字型變大後,發現下劃線沒法對齊,**如下:

dddddddddd p{

font-size: 44px;

text-decoration: underline;

p:first-letter{

font-size:80px;

後來改用 font-variant、text-transform 屬性後解決了這個問題,**如下;

p{font-size: 44px;

text-decoration: underline;

font-variant: small-caps; //關鍵屬性

text-transform: capitalize; //關鍵屬性

text-transform 屬性

這個屬性會改變元素中的字母大小寫,而不論源文件中文字的大小寫。

如果值為 capitalize,則要對某些字母大寫,但是並沒有明確定義如何確定哪些字母要大寫,這取決於使用者**如何識別出各個 「詞」。

值 描述

none 預設。定義帶有小寫字母和大寫字母的標準的文字。

capitalize 文字中的每個單詞以大寫字母開頭。

uppercase 定義僅有大寫字母。

lowercase 定義無大寫字母,僅有小寫字母。

inherit 規定應該從父元素繼承 text-transform 屬性的值。

相容性:

瀏覽器相容:ie、firefox、chrome、safari、opera

注釋:任何的版本的 internet explorer (包括 ie8)都不支援屬性值 "inherit"。所有瀏覽器都支援 text-transform 屬性。

font-variant 屬性

設定小型大寫字母的字型顯示文字,這意味著所有的小寫字母均會被轉換為大寫,但是所有使用小型大寫字型的字母與其餘文字相比,其字型尺寸更小。(意味著已經使用大寫字母的文字字型會更大)。

值 描述

normal 預設值。瀏覽器會顯示乙個標準的字型。

small-caps 瀏覽器會顯示小型大寫字母的字型。

inherit 規定應該從父元素繼承 font-variant 屬性的值。

相容性:

所有主流瀏覽器都支援 font-variant 屬性。注釋:任何的版本的 internet explorer (包括 ie8)都不支援屬性值 "inherit"

。詳細資料,**群獲取:586656942

首字母變大寫(杭電2026)

首字母變大寫 input 輸入資料報含多個測試例項,每個測試例項是乙個長度不超過100的英文句子,佔一行。output 請輸出按照要求改寫後的英文句子。sample input i like acm i want to get an accepted sample output i like acm...

首字母大寫

對乙個字串中的所有單詞,如果單詞的首字母不是大寫字母,則把單詞的首字母變成大寫字母。在字串中,單詞之間通過空白符分隔,空白符包括 空格 製表符 t 回車符 r 換行符 n 輸入一行 待處理的字串 長度小於100 可能有多組測試資料,對於每組資料,輸出一行 轉換後的字串 輸入可以接受空格,回車等空白符...

CSS中首字母大寫怎麼實現?

css中首字母大寫怎麼實現?日常生活中需求方對英文的要求比較多,有的時候需要讓英文單詞或拼音首個字母大寫 有的時候需要讓全文中英文單詞全大寫或小寫。這時候我們就需要text transform屬性了。好了廢話不多說,直接看例子吧。css 首字母大寫 a 全都是大寫 b 全都是小寫 c html 首字...