css3 新增的文字屬性

2021-08-20 05:13:01 字數 3029 閱讀 8002

1、word-wrap  允許對長的不可分割的單詞進行分割並換行到下一行

2、word-break   規定非中日韓文字的換行規則

3、text-wrap   規定文字的換行規則

4、text-shadow   向文字新增陰影

5、text-overflow   規定當文字溢位包含元素時發生的事情

6、text-outline   規定文字的輪廓

7、text-justify    規定當 text-align 設定為 "justify" 時所使用的對齊方法

8、text-emphasis    向元素的文字應用重點標記以及重點標記的前景色

9、text-align-last    設定如何對齊最後一行或緊挨著強制換行符之前的行

10、punctuation-trim   規定是否對標點字元進行修剪

11、hanging-punctuation   規定標點字元是否位於線框之外

word-wrap:

瀏覽器支援:所有主流瀏覽器都

支援該屬性

語法: 

word-wrap:normal | break-word

對比一下normal(圖左)的效果和break-word(圖右)的效果:

瀏覽器支援:所有主流瀏覽器都

支援該屬性

語法:word-break: normal|break-all|keep-all;    // break-all:允許在單詞內換行 ;  keep-all:只能在半形空格或者連字元處換行

text-wrap:

瀏覽器支援:所有主流瀏覽器都

不支援該屬性

語法:text-wrap: normal|none|unrestricted|suppress;    // normal:只在允許的換行點進行換行;   none:不換行;  

// unrestricted:在任意兩個字元間換行;   

suppress:

壓縮元素中的換行。瀏覽器只在行中沒有其他有效換行點時進行換行

text-shadow:

瀏覽器支援:所有主流瀏覽器都

支援該屬性

語法:text-shadow: h-shadow v-shadow blur color;  

注釋text-shadow 屬性向文字新增乙個或多個陰影。該屬性是逗號分隔的陰影列表,每個陰影有兩個或三個長度值和乙個可選的顏色值進行規定。省略的長度是 0

text-overflow:

瀏覽器支援:所有主流瀏覽器都

支援該屬性

語法:text-overflow: clip|ellipsis|string;    // clip:修剪文字;  ellipsis:顯示省略號來代表被修剪的文字;  string:使用給定的字串來代表被修剪的文字

text-outline:

瀏覽器支援:所有主流瀏覽器都

不支援該屬性

語法:text-outline: thickness blur color;

瀏覽器支援:只有internet explorer 支援 text-justify 屬性

語法:text-justify: auto|inter-word|inter-ideograph|inter-cluster|distribute|kashida|trim;

瀏覽器支援:所有主流瀏覽器都

不支援該屬性

語法:text-emphasis: text-emphasis-style text-emphasis-color;  //text-emphasis-style:向元素的文字應用重點標記; text-emphasis-color:定義重點標記的前景色

text-align-last:

瀏覽器支援:

語法:text-align-last: auto|left|right|center|justify|start|end|initial|inherit;

auto:無特殊對齊方式left:內容左對齊center:內容居中對齊right:內容右對齊justify:內容兩端對齊start:內容對齊開始邊界end:

內容對齊結束邊界

initial:設定該屬性為它的預設值

inherit:從父元素繼承該屬性

punctuation-trim:

瀏覽器支援:所有主流瀏覽器都

不支援該屬性

語法:punctuation-trim: none|start|end|allow-end|adjacent;

瀏覽器支援:所有的主流瀏覽器都

不支援該屬性

語法:hanging-punctuation: none|first|last|allow-end|force-end;

// none:不在文字整行的開頭還是結尾的行框之外放置標籤符號; first:標點附著在首行開始邊緣之外; last:標點附著在首行結尾邊緣之外

css 3 常用文字屬性

一 text overflow 規定當文字溢位包含元素時發生的事情 瀏覽器支援 所有主流瀏覽器 值 clip 修剪文字 ellipsis 顯示省略符號來代表被修剪的文字 string 使用給定的字串來代表被修剪的文字 二 word break 規定自動換行的處理方法 瀏覽器支援 除opera以外的所...

css3文字屬性

text shadow 用來是文字產生陰影!text shadow x y blur color text stroke 用來給文字加邊框的!text stroke size color text overflow 用來處理文字溢位的。text overflow ellipsis或者clip 其中e...

CSS3 總結(三) 文字屬性(Text)

屬性 描述color color 屬性規定文字的顏色。這個屬性設定了乙個元素的前景色 在 html 表現中,就是元素文字的顏色 屬性值 1.預定義的顏色,如red green blue等。2.規定顏色值為十六進製制值的顏色 比如 ff0000,每兩位分別代表顏色紅綠藍 當每種顏色中的數值都是同乙個的...