详解CSS 文本属性（Text）

/* 关键字值 Keyword values */color: currentcolor;/* 颜色名称 <named-color> values */color: red;color: orange;color: tan;color: rebeccapurple;/* 十六进制颜色 <hex-color> values */color: #090;color: #009900;color: #090a;color: #009900aa;/* <rgb> values ,逗号 可以换成空格,但是目前 最好别这么做,兼容性还没那么好*/color: rgb(34, 12, 64);/*rgb()中带不透明度值,浏览器支持度不好,用rgba()*/color: rgb(34, 12, 64, 0.6);color: rgba(34, 12, 64, 0.6);color: rgb(34 12 64 / 0.6);color: rgba(34 12 64 / 0.3);color: rgb(34.0 12 64 / 60%);color: rgba(34.6 12 64 / 30%);/* <hsl> values ,逗号 可以换成空格,但是目前 最好别这么做,兼容性还没那么好*/color: hsl(30, 100%, 50%);/*hsl()中带 不透明度值,浏览器支持度不好,用 hsla()*/color: hsl(30, 100%, 50%, 0.6);color: hsla(30, 100%, 50%, 0.6);color: hsl(30 100% 50% / 0.6);color: hsla(30 100% 50% / 0.6);color: hsl(30.0 100% 50% / 60%);color: hsla(30.2 100% 50% / 60%);/* Global values */color: inherit;color: initial;color: unset;</hsl></rgb></hex-color></named-color>

color {    width: 600px;    border: 10px dashed;    padding: 10px;    /*把一段文字 设置成红色的 方法*/    color: red;    color: #f00;    color: #ff0000;    color: rgb(255,0,0);    color: rgb(100%,0%,0%);    color: hsl(0,100%,50%);    /*设置 半透明的红色 = 不透明值 等于一半的 红色*/    color: #ff000080;    color: rgba(255,0,0,0.5);    color: hsla(0,100%,50%,0.5);}

/* 关键字值 Keyword values */direction: ltr;direction: rtl;/* 全局通用的属性值 Global values */direction: inherit;direction: initial;direction: unset;

.color {    width: 450px;    border: 10px dashed;    padding: 10px;        /*设置文本的方向*/    direction: rtl;}

.dirTest {    border: 1px solid;    width: 300px;    direction: rtl;    background-color: #d0d0d0;}.dirTest td, th {    border: 1px solid;}

/* 关键字值 Keyword values */hanging-punctuation: none;hanging-punctuation: first;hanging-punctuation: last;hanging-punctuation: force-end;hanging-punctuation: allow-end;/* 两个值 Two keywords */hanging-punctuation: first force-end;hanging-punctuation: first allow-end;hanging-punctuation: first last;hanging-punctuation: last force-end;hanging-punctuation: last allow-end;/* 三个值 Three keywords */hanging-punctuation: first force-end last;hanging-punctuation: first allow-end last;/* 全局值 Global values */hanging-punctuation: inherit;hanging-punctuation: initial;hanging-punctuation: unset;

/* 关键字值 Keyword value */letter-spacing: normal;/* 长度值 <length> values */letter-spacing: 0.3em;letter-spacing: 3px;letter-spacing: .3px;/* 全局值 Global values */letter-spacing: inherit;letter-spacing: initial;letter-spacing: unset;</length>

    	<p>    	    业精于勤是一个汉语成语，拼音是 yè jīng yú qín，意思是指 学业的精进 在于勤奋。出处唐·韩愈《进学解》：“业精于勤，荒于嬉；行成于思，毁于随。    	</p>

.textTest {    width: 450px;    border: 10px dashed;    padding: 10px;    /*字符之间的间距*/    letter-spacing: normal;}

/* 关键字值 Keyword value */line-height: normal;/* 无单位值: 字体大小 font-size的倍数  Unitless values: use this number multipliedby the element's font size */line-height: 3.5;/* 长度值 <length> values */line-height: 3em;/* 百分比值 <percentage> values */line-height: 34%;/* 全局值 Global values */line-height: inherit;line-height: initial;line-height: unset;</percentage></length>

.textTest {    width: 450px;    border: 10px dashed;    padding: 10px;    font-size: 16px;    line-height: 1.5em;}

    	<div>    		<h1>业精于勤是一个汉语成语，拼音是 yè jīng yú qín，意思是指 学业的精进 在于勤奋。出处唐·韩愈《进学解》：“业精于勤，荒于嬉；行成于思，毁于随。</h1>    	    <p>业精于勤是一个汉语成语，拼音是 yè jīng yú qín，意思是指 学业的精进 在于勤奋。出处唐·韩愈《进学解》：“业精于勤，荒于嬉；行成于思，毁于随。</p>    	</div>

.textTest {    width: 450px;    border: 10px dashed;    padding: 10px;    font-size: 16px;}

/* 关键字值 Keyword values */text-align: left;text-align: right;text-align: center;text-align: justify;/*下方的属性值 支持度还不好 暂时不用少用*/text-align: justify-all;text-align: start;text-align: end;text-align: match-parent;/* 表列中 基于字符的对齐 Character-based alignment in a table column */text-align: ".";text-align: "." center;/* 块对齐值 Block alignment values (非标准语法 Non-standard syntax) */text-align: -moz-center;text-align: -webkit-center;/* 全局值 Global values */text-align: inherit;text-align: initial;text-align: unset;

.textTest {    width: 400px;    border: 10px dashed;    padding: 10px;    font-size: 16px;    margin: 10px;}

margin: 0 auto;

/* 关键字值 Keyword values */vertical-align: baseline;vertical-align: sub;vertical-align: super;vertical-align: text-top;vertical-align: text-bottom;vertical-align: middle;vertical-align: top;vertical-align: bottom;/* 长度值 <length> values */vertical-align: 10em;vertical-align: 4px;/* 百分比值 <percentage> values */vertical-align: 20%;/* 全局值 Global values */vertical-align: inherit;vertical-align: initial;vertical-align: unset;</percentage></length>

.textTest {    width: 400px;    border: 10px dashed;    padding: 10px;    margin: 0 auto;    font-size: 16px;    /*文本水平对齐*/    text-align: left;    /*文本最后一行 水平对齐*/    text-align-last: auto;}

text-justify: none;text-justify: auto;text-justify: inter-word;text-justify: inter-character;text-justify: distribute; /* 已废弃的属性值 Deprecated value */

.textjustify{    width: 30%;    background-color: #d0d0d0;    padding: 10px;	    border: solid black 2px;    font-size: 1.2em;	    /*text-align: justify;*/    /*text-justify:auto;*/    /*text-justify:none;*/    /*text-justify:inter-word;*/    /*text-justify:inter-character;*/    /*text-justify:distribute;*/}

/* Keyword values */vertical-align: baseline;vertical-align: sub;vertical-align: super;vertical-align: text-top;vertical-align: text-bottom;vertical-align: middle;vertical-align: top;vertical-align: bottom;/* <length> values */vertical-align: 10em;vertical-align: 4px;/* <percentage> values */vertical-align: 20%;/* Global values */vertical-align: inherit;vertical-align: initial;vertical-align: unset;</percentage></length>

.verticalTest{width: 700px;text-decoration: underline overline;font-size: 1.5em;/*line-height = font-size x 1.5 = 1.5em x 1.5 = 1.5 x 16 x 1.5*/line-height: 1.5em;background-color: #d0d0d0;padding: 10px;border: 2px solid green;}.verticalTest img{ /* 10px/16px = 0.625 */margin-right: 0.625em;}

    <p>        baseline:        @@##@@        sub:        @@##@@        super:        @@##@@        text-top:        @@##@@        text-bottom:        @@##@@        middle:        @@##@@    </p>    <p>        0px:(基线重叠)= baseline        @@##@@        10px (父元素 基线上方10px)        @@##@@        0.5em:        @@##@@        -0.5em:        @@##@@5        0%:        @@##@@        -50%:        @@##@@    </p>    <p>    	top:        @@##@@    	bottom:         @@##@@           </p>

.verticalTable{width: 50%;}table.verticalTable ,.verticalTable th,.verticalTable td{border: 1px solid green;}.verticalTable td{padding: 10px;background-color: #d0d0d0;}

    <!-- 表格单元格内容的 垂直对齐 -->    

 ||  || 

.textdec {/*给文本 添加下划线*/    text-decoration: underline;    width: 30%;    background-color: #d0d0d0;    padding: 10px;    line-height: 1.5em;}.textdec strong {/*取消强调文本的下划线*/    text-decoration: none;    color: green;}

    <p>        <strong>少壮不努力，老大徒伤悲。</strong>意思是,年轻力壮的时候 不奋发图强，到了老年 再悲伤也没用了。出处,《乐府诗集·长歌行》    </p>

.decline{    background-color: #d0d0d0;    text-decoration:underline wavy #008000;/*	text-decoration-line: underline;text-decoration-style:wavy;text-decoration-color: green;*/}

/* 单个 关键字值 Single keyword */text-decoration-line: none;text-decoration-line: underline;text-decoration-line: overline;text-decoration-line: line-through;text-decoration-line: blink;/* 多个 关键字值,同时指定几条装饰线 Multiple keywords */text-decoration-line: underline overline;               /* Two decoration lines */text-decoration-line: overline underline line-through;  /* Multiple decoration lines *//* 全局值  Global values */text-decoration-line: inherit;text-decoration-line: initial;text-decoration-line: unset;

.decline{    background-color: #d0d0d0;text-decoration-line: overline;/*text-decoration-line: line-through;*//*text-decoration-line: underline;*//*text-decoration-line: blink;*/}

    <p>    	纸上得来终觉浅，绝知此事要躬行。    </p>

/* 关键字值 Keyword values */text-decoration-style: solid;text-decoration-style: double;text-decoration-style: dotted;text-decoration-style: dashed;text-decoration-style: wavy;/* 全局值 Global values */text-decoration-style: inherit;text-decoration-style: initial;text-decoration-style: unset;

.decline{    background-color: #d0d0d0;text-decoration-line: underline;text-decoration-style:double;/*text-decoration-style:dotted;*//*text-decoration-style:dashed;*//*text-decoration-style:wavy;*/}

.decline{    background-color: #d0d0d0;text-decoration-line: underline;text-decoration-style:wavy;text-decoration-color: green;}.decline del{text-decoration-line: line-through;text-decoration-color:red;}

/* 初始值 Initial value */text-emphasis: none; /* No emphasis marks *//* 字符串值 <string> value */text-emphasis: 'x';text-emphasis: '点';text-emphasis: '\25B2';text-emphasis: '*' #555;text-emphasis: 'foo'; /* 不应使用。它可以仅被计算为“f” 或呈现为“f” Should NOT use. It may be computed to or rendered as 'f' only *//* 关键字值 Keywords value */text-emphasis: filled;text-emphasis: open;text-emphasis: filled sesame;text-emphasis: open sesame;/* 关键词值 与 颜色 相结合 Keywords value combined with a color */text-emphasis: filled sesame #555;/* 全局值 Global values */text-emphasis: inherit;text-emphasis: initial;text-emphasis: unset;</string>

.textemphasis{    width: 35%;    /*background-color: #d0d0d0;*/    padding: 10px;	    border: solid black 2px;    font-size: 1.2em;}.textemphasis strong{-webkit-text-emphasis-position:under;-webkit-text-emphasis:dot;-webkit-text-emphasis:open dot;/*-webkit-text-emphasis:circle;*//*-webkit-text-emphasis:open circle;*//*-webkit-text-emphasis:double-circle;*//*-webkit-text-emphasis:open double-circle;*//*-webkit-text-emphasis:triangle;*//*-webkit-text-emphasis:open triangle;*//*-webkit-text-emphasis:sesame;*//*-webkit-text-emphasis:open sesame;*//*指定字符串 作为文本强调的符号*//*-webkit-text-emphasis:"z";*//*-webkit-text-emphasis:"x";*//*-webkit-text-emphasis:"大";*/    /*同时设置 空心/实心/强调符号/颜色*//*-webkit-text-emphasis: circle open;*//*-webkit-text-emphasis: circle open red;*/}

        <p>        	<strong>取其精华，去其糟粕。</strong>是一个汉语成语，读音qǔ qí jīng huá qù qí zāo pò意思是吸取事物中最好的东西，舍弃事物中坏的，无用的东西。        </p>

/* 初始值 Initial value */text-emphasis-style: none; /* 没有强调符号 No emphasis marks *//*  值 value */text-emphasis-style: 'x';text-emphasis-style: '点';text-emphasis-style: '\25B2';text-emphasis-style: '*';text-emphasis-style: 'foo'; /* 不应使用。它可以仅被计算为“f”或呈现为“f” Should NOT use. It may be computed to or rendered as 'f' only *//* 关键字值 Keywords value */text-emphasis-style: filled;text-emphasis-style: open;text-emphasis-style: filled sesame;text-emphasis-style: open sesame;/* 全局值  Global values */text-emphasis-style: inherit;text-emphasis-style: initial;text-emphasis-style: unset;

/* 初始值 Initial value */text-emphasis-color: currentColor;/* 合法颜色值 <color> */text-emphasis-color: #555;text-emphasis-color: blue;text-emphasis-color: rgba(90, 200, 160, 0.8);text-emphasis-color: transparent;/* 全局值 Global values */text-emphasis-color: inherit;text-emphasis-color: initial;text-emphasis-color: unset;</color>

/* 初始值 Initial value */text-emphasis-position: over right;/* 关键字值 Keywords value */text-emphasis-position: over left;text-emphasis-position: under right;text-emphasis-position: under left;text-emphasis-position: left over;text-emphasis-position: right under;text-emphasis-position: left under;/* 全局值 Global values */text-emphasis-position: inherit;text-emphasis-position: initial;text-emphasis-position: unset;

/* 长度值 <length> values */text-indent: 3mm;text-indent: 40px;/* 百分比值 相对于 包含自身的元素的 宽度 <percentage> value   relative to the containing block width */text-indent: 15%;/* 关键字值 目前尚未标准化 不要使用 Keyword values */text-indent: 5em each-line;text-indent: 5em hanging;text-indent: 5em hanging each-line;/* 全局值 Global values */text-indent: inherit;text-indent: initial;text-indent: unset;</percentage></length>

.textindent {    width: 40%;    background-color: #d0d0d0;    padding: 10px;    /*设置文本缩进*/    text-indent: 50px;/*  text-indent: 3em;    text-indent: -2em;    text-indent: 10%;*/    }

    <p>    	“<strong>勿以恶小而为之，勿以善小而不为。</strong>惟贤惟德，能服于人。” 劝人要进德修业，有所作为。不要因为好事小 而不做，更不能因为坏事小 而去做。小善积多了,就成为利天下的大善，而小恶积多了则 “足以乱国家”。    </p>

overflow: hidden;white-space: nowrap;

/* 行尾的 溢出行为  Overflow behavior at line end   Right end if ltr, left end if rtl */text-overflow: clip;text-overflow: ellipsis;text-overflow: "…";text-overflow: fade;text-overflow: fade(10px);text-overflow: fade(5%);/* 溢出 在左端|在右端的行为 ,方向性 没有影响 Overflow behavior at left end | at right end   Directionality has no influence */text-overflow: clip ellipsis;text-overflow: "…" "…";text-overflow: fade clip;text-overflow: fade(10px) fade(10px);text-overflow: fade(5%) fade(5%);/* 全局值 Global values */text-overflow: inherit;text-overflow: initial;text-overflow: unset;

width: 100%;  /*也可以是固定值、min-width这些*/white-space: nowrap;  /*强制文本不能换行*/overflow: hidden;  /*隐藏溢出内容*/text-overflow: ellipsis;

.textjoverflow{    width: 30%;    background-color: #d0d0d0;    padding: 10px;	    border: solid black 2px;    font-size: 1.2em;	    /*设置不换行,才会有文本溢出*/    white-space: nowrap;    /*设置 overflow 溢出隐藏,文本溢出显示 才有效*/    overflow: hidden;    text-overflow: clip;    /*text-overflow: ellipsis;*/    /*目前不支持 指定字符串 所以此值无效*/    /*text-overflow: "";*/    /*direction: rtl;*/}

    <p>金无足赤,人无完人。“黄金无足色，白璧有微瑕。求人不求备，妾愿老君家。” <br>No one is perfect, everyone will make mistakes.</p>

/* 关键字值 Keyword values */text-transform: none;text-transform: capitalize;text-transform: uppercase;text-transform: lowercase;text-transform: full-width;text-transform: full-size-kana;/* 全局值 Global values */text-transform: inherit;text-transform: initial;text-transform: unset;

.texttransform{    width: 35%;    background-color: #d0d0d0;    padding: 10px;    font-weight: bold;	    font-size: 1.2em;	    /*改变文本的大小写*/    /*text-transform:capitalize;*/    /*text-transform:uppercase;*/    /*text-transform:lowercase;*/}

    <p>金无足赤,人无完人。<br>No one is perfect, everyone will make mistakes.</p>

/* x 偏移量 offset-x | y 偏移量 offset-y | 模糊半径 blur-radius | 颜色 color */text-shadow: 1px 1px 2px black; /* color | offset-x | offset-y | blur-radius */text-shadow: #fc0 1px 0 10px; /* offset-x | offset-y | color */text-shadow: 5px 5px #558abb;/* color | offset-x | offset-y */text-shadow: white 2px 5px;/* offset-x | offset-y/* 使用默认的 颜色和模糊半径 */text-shadow: 5px 10px;/* 全局值 Global values */text-shadow: inherit;text-shadow: initial;text-shadow: unset;

.textshadow{    width: 40%;    background-color: #d0d0d0;    padding: 10px;    font-weight: bold;	    font-size: 1.5em;    text-shadow:3px 3px green ;}

    <p>海纳百川，有容乃大；壁立千仞，无欲则刚。</p>

/* 关键字值 Keyword values */unicode-bidi: normal;unicode-bidi: embed;unicode-bidi: isolate;unicode-bidi: bidi-override;unicode-bidi: isolate-override;unicode-bidi: plaintext;/* 全局值 Global values */unicode-bidi: inherit;unicode-bidi: initial;unicode-bidi: unset;

/* 关键字值 Keyword values */word-break: normal; word-break: break-all; word-break: keep-all;word-break: break-word; /* deprecated 已废弃 *//* 全局值 Global values */word-break: inherit;word-break: initial;word-break: unset;

.wordbreak{    width: 30%;    background-color: #d0d0d0;    padding: 10px;	    border: solid black 2px;    font-size: 1.2em;	    /*单词换行处 设置*/    word-break: normal;    /*word-break: break-all;*/    /*word-break: keep-all;*/    /*word-break: break-word;*/}

/* 关键字值 Keyword values */overflow-wrap: normal;overflow-wrap: break-word;overflow-wrap: anywhere;/* 全局值 Global values */overflow-wrap: inherit;overflow-wrap: initial;overflow-wrap: unset;

.wordbreak{    width: 20%;    background-color: #d0d0d0;    padding: 10px;	    border: solid black 2px;    font-size: 1.2em;	    /*单词换行处 设置*/    /*word-break: normal;*/    /*word-break: break-all;*/    /*word-break: keep-all;*/    /*word-break: break-word;*/}.wordwrap{        /*单词 断行位置*//*word-wrap: normal;*/    /*word-wrap: break-word;*/}

    <p>金无足赤,人无完人。出自宋·戴复古《寄兴》：“黄金无足色，白璧有微瑕。求人不求备，妾愿老君家。” 也比喻不能要求一个人没有一点缺点错误,应该严以律己,宽以待人。<br> No one is perfect, everyone will make mistakes,be strict with yourself and lenient toward others.Nooneisperfecteveryonewillmakemistakes</p>

/* 关键字值 Keyword value */word-spacing: normal;/* 长度值 <length> values */word-spacing: 3px;word-spacing: 0.3em;/* 百分比值 <percentage> values */word-spacing: 50%;word-spacing: 200%;/* 全局值 Global values */word-spacing: inherit;word-spacing: initial;word-spacing: unset;</percentage></length>

.wordspace {    width: 25%;    background-color: #d0d0d0;    padding: 10px;    border: solid black 2px;    font-size: 1.1em;        /*设置单词/字 之间的距离*/    word-spacing: normal;    /*word-spacing:4px;*/    /*word-spacing:-4px;*/    /*word-spacing:1em;*/    /*word-spacing:-1em;*/    /*百分比值 目前各大主流浏览器 不支持*/    /*word-spacing:10%;*/}

    <p>金无 足赤,人无 完人。比喻 不能要求一个人 没有一点缺点错误,应该 严以律己,宽以待人。        <br>No one is perfect, everyone will make mistakes,be strict with yourself and lenient toward others.</p>

/* 关键字值 Keyword values */white-space: normal;white-space: nowrap;white-space: pre;white-space: pre-wrap;white-space: pre-line;white-space: break-spaces;/* 全局值 Global values */white-space: inherit;white-space: initial;white-space: unset;

.whitespace{width: 25%;    background-color: #d0d0d0;    padding: 10px;	    border: solid black 2px;    font-size: 1.1em;	    white-space:normal;    white-space:nowrap;    white-space:pre;    white-space:pre-wrap;    white-space:pre-line;    /*white-space:break-space;*/}

    <p>         <strong>                《题乌江亭》      </strong>                                 唐代·杜牧         <b>胜败兵家事不期，包羞忍耻是男儿。</b>         <b>江东子弟多才俊，卷土重来未可知。</b>         <br>        译文: 胜败乃是兵家常事，难以事前预料。能够忍辱负重，才是真正男儿。        西楚霸王啊，江东子弟人才济济，若能重整旗鼓卷土杀回，楚汉相争，谁输谁赢还很难说。    </p>