• 技术文章 >web前端 >css教程

    详解CSS 文本属性(Text)

    青灯夜游青灯夜游2022-08-03 16:10:02转载219
    CSS Text(文本)属性用于定义文本的外观,比如文本的颜色,对齐文本,装饰文本,文本颜色,行间距等。本篇文章带大家了解一下CSS 文本属性(Text),希望对大家有所帮助!

    CSS 文本属性(Text)


    用于属性名CSS 版本浏览器支持继承性默认值
    ① 颜色的前景色 (文本/文本装饰/边框/当前颜色的 颜色) 。color1都支持。IE 所有版本 不支持属性值“inherit”。yesnot specified
    ② 文本的书写方向。文本/表列/水平溢出的 方向 (文本方向 可用标签的 dir 属性 替代)。direction2同上。yesltr
    ③ 标点字符 是否位于线框之外。属性: 悬挂标点的 位置和符号 (实验中 属性)。hanging-punctuation3safari 10.1+支持,其他 都不支持yesnone
    ④ 字符间距 (字符之间的 额外空白/空间)。letter-spacing1同上。yesnormal
    行高。设置 行高/行间距 (一行多高,影响 行之间的 距离) 。line-height1同上。yesnormal
    ⑤ 标点字符 修剪。punctuation-trim3都不支持yesnone
    ⑥ 文本 水平对齐 方式。text-align1都支持。IE 所有版本yes如果 direction 属性是 ltr,则默认值是 left;如果 direction 是 rtl,则为 right。 不支持属性值“inherit”。
    ⑦ 文本最后一行 水平对齐方式 (搭配 direction,text-align 属性)。text-align-last3IE11+,edge14+部分支持,FF52+ chrome49+ opera45+支持,safari不支持。yesauto
    ⑧ 文本 装饰(线)。text-decoration1同上,且IE、Chrome 或 Safari 不支持 “blink” 属性值。nonone.(块元素 首行) 文本的 缩进量 (空白长度)。
    ⑨ 添加 文本强调符号(形状,颜色,位置) 。text-emphasis3IE,Edge 不支持,FF52+ safari10.1+ 支持,chrome49+部分支持。nonone
    ⑩ 文本两端对齐的 空间分隔方式 (搭配text-align属性)。text-justify3IE11+,edge14+部分支持,FF55+支持,其他不支持。yesauto
    ⑪ 文本的阴影 (影响 装饰线 text-decoration)。text-shadow2都支持。IE 10及以上才支持。yesnone
    文本 大小写转换。text-transform1都支持。IE 所有版本 不支持属性值“inherit”。yesnone
    ⑫ 文本的轮廓。text-outline3都不支持yesnone
    ⑬ 隐藏文本溢出时 的显示 (搭配 overflow,white-space,display 属性)。text-overflow3都支持,不需要前缀。noclip
    ⑭ 文本添加阴影。text-shadow3都支持,IE10+支持yesnone
    ⑮ 文本的换行规则。text-wrap3都不支持yesnormal
    ⑯ 双向文本的 重写/覆盖 (搭配 direction属性)。unicode-bidi2
    yes
    ⑰ 空白和换行的 处理。white-space1都支持。IE 所有版本 不支持属性值“inherit”。yesnormal
    ⑱ 单词 换行/断行 位置 (能否 词内断行)。word-break3都支持。IE6+支持。yesnormal
    ⑲ 对长的不可分割的单词 进行分割并换行到下一行。单词 断行时的 断行位置 (断句/断行 方式)。word-wrap3都支持,IE6+yesnormal
    ⑳ 单词/字 之间的 距离。word-spacing1同上yesnormal

    1. color 属性: 颜色的前景色 (文本/文本装饰/边框/当前颜色的 颜色)




    /* 关键字值 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;



    在这里插入图片描述

    在这里插入图片描述


    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);
    }
    红色半透明的红色
    红色半透明的红色

    2. direction 属性: 文本/表列/水平溢出的 方向 (文本方向 可用标签的 dir 属性 替代)


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



    在这里插入图片描述


    .color {
        width: 450px;
        border: 10px dashed;
        padding: 10px;
        
        /*设置文本的方向*/
        direction: rtl;
    }
    默认的文本方向: ltr 从左到右设置成 从右到左 direction: rtl;

    .dirTest {
        border: 1px solid;
        width: 300px;
        direction: rtl;
        background-color: #d0d0d0;
    }
    .dirTest td, th {
        border: 1px solid;
    }
        	<table class="dirTest">
        	    <tr>
        	        <th>①姓名</th>
        	        <th>②爱吃的水果名</th>
        	        <th>③爱好</th>
        	    </tr>
        	    <tr>
        	        <td>
    
        	            小明
        	        </td>
        	        <td>
        	            葡萄
       	
        	        </td>
        	        <td>乒乓球</td>
        	    </tr>
        	    <tr>
        	        <td>
        	            莉莉
        	        </td>
        	        <td>
        	            苹果
        	        </td>
        	        <td>动漫</td>
        	    </tr>
        	</table>
    默认方向: 从左到右设置 从右到左

    3. CSS3 hanging-punctuation 属性: 悬挂标点的 位置和符号 (实验中 属性)


    /* 关键字值 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;



    在这里插入图片描述


    4. letter-spacing 属性 : 字符间距 (字符之间的 额外空白/空间)



    /* 关键字值 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;




    在这里插入图片描述


        	<p class="textTest">
        	    业精于勤是一个汉语成语,拼音是 yè jīng yú qín,意思是指 学业的精进 在于勤奋。出处唐·韩愈《进学解》:“业精于勤,荒于嬉;行成于思,毁于随。
        	</p>
    .textTest {
        width: 450px;
        border: 10px dashed;
        padding: 10px;
        /*字符之间的间距*/
        letter-spacing: normal;
    }
    正常间距 (默认值) normal增加 0.2em的额外间距 letter-spacing: 0.2em;
    减少 0.2em的额外间距 letter-spacing: -0.2em;字符间距 不正常的字体(太大/太小) 2em, -0.9em

    5. line-height 属性: 设置 行高/行间距 (一行多高,影响 行之间的 距离)



    /* 关键字值 Keyword value */
    line-height: normal;
    
    /* 无单位值: 字体大小 font-size的倍数  Unitless values: use this number multiplied
    by 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;





    在这里插入图片描述


    .textTest {
        width: 450px;
        border: 10px dashed;
        padding: 10px;
    
        font-size: 16px;
        line-height: 1.5em;
    }
    默认 文本行高 = normal 值绝对长度值 行高 line-height: 40px;
    相对长度值 行高 1.5em = 150%不带单位 纯数字 line-height: 1.5;

        	<div class="textTest">
        		<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;
    }
    默认 文本行高 = normal 值设置成 绝对长度值时: 25px (h1 的文本 行高太挤)
    设置成 相对长度值: 1.5em = 150%设置成 纯数字 不带单位: line-height: 1.5;

    6. CSS3 punctuation-trim 属性: 标点修剪 (浏览器 都不支持)




    7. text-align 属性: 文本 水平对齐 方式



    /* 关键字值 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;



    在这里插入图片描述


    示例1: 设置一段文本的 水平对齐方式

    .textTest {
        width: 400px;
        border: 10px dashed;
        padding: 10px;
    
        font-size: 16px;
        margin: 10px;
    }
    左对齐 text-align:left;右对齐 text-align:right;
    居中对齐 text-align:center;两端对齐 text-align:justify;

    margin: 0 auto;

    在这里插入图片描述


    7.1 CSS3 text-align-last 属性: 文本最后一行 水平对齐方式 (搭配 direction,text-align 属性)


    /* 关键字值 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;


    在这里插入图片描述


    .textTest {
        width: 400px;
        border: 10px dashed;
        padding: 10px;
        margin: 0 auto;
        font-size: 16px;
        /*文本水平对齐*/
        text-align: left;
    
        /*文本最后一行 水平对齐*/
        text-align-last: auto;
    }
    ① 默认显示② text-align-last: auto;
    ③ 起点对齐 text-align-last: start;④ 终点对齐 text-align-last: end;
    ⑤ 左对齐 text-align-last: left;⑥ 右对齐 text-align-last: right;
    ⑦ 居中对齐 text-align-last: center;⑧ 两端对齐 text-align-last: justify;

    7.2 CSS3 text-justify 属性: 文本两端对齐的 空间分隔方式 (搭配 text-align 属性)


    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;*/
    
    }
        <p class="textjustify">金无足赤,人无完人。出自宋·戴复古《寄兴》:“黄金无足色,白璧有微瑕。求人不求备,妾愿老君家。” 也比喻不能要求一个人没有一点缺点错误,应该严以律己,宽以待人。<br />No one is perfect, everyone will make mistakes,be strict with yourself and lenient toward others.</p>
    默认 水平对齐水平 两端对齐 text-align: justify; ( 默认= text-justify:auto;)
    禁用 两端对齐 text-justify:none;调整 单词间距离 inter-word
    调整 字符间距离 inter-character分散 distribute (已废弃属性值)


    7.3 vertical-align 属性: 垂直对齐方式 (针对 行内元素,表格单元格内容)



    /* 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;



    在这里插入图片描述


    .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 class="verticalTest">
            baseline:
            <img src="https://mdn.mozillademos.org/files/15189/star.png" alt="" style="vertical-align:baseline" />
            sub:
            <img src="https://mdn.mozillademos.org/files/15189/star.png" alt="" style="vertical-align:sub" />
            super:
            <img src="https://mdn.mozillademos.org/files/15189/star.png" alt="" style="vertical-align:super" />
            text-top:
            <img src="https://mdn.mozillademos.org/files/15189/star.png" alt="" style="vertical-align:text-top" />
            text-bottom:
            <img src="https://mdn.mozillademos.org/files/15189/star.png" alt="" style="vertical-align:text-bottom" />
            middle:
            <img src="https://mdn.mozillademos.org/files/15189/star.png" alt="" style="vertical-align:middle" />
        </p>
    
        <p class="verticalTest">
            0px:(基线重叠)= baseline
            <img src="https://mdn.mozillademos.org/files/15189/star.png" alt="" style="vertical-align:0px" />
            10px (父元素 基线上方10px)
            <img src="https://mdn.mozillademos.org/files/15189/star.png" alt="" style="vertical-align:10px" />
            0.5em:
            <img src="https://mdn.mozillademos.org/files/15189/star.png" alt="" style="vertical-align:0.5em" />
            -0.5em:
            <img src="https://mdn.mozillademos.org/files/15189/star.png" alt="" style="vertical-align:-0.5em" />5
            0%:
            <img src="https://mdn.mozillademos.org/files/15189/star.png" alt="" style="vertical-align:50%" />
            -50%:
            <img src="https://mdn.mozillademos.org/files/15189/star.png" alt="" style="vertical-align:-50%" />
    
        </p>
    
        <p class="verticalTest">
        	top:
            <img src="https://mdn.mozillademos.org/files/15189/star.png" alt="" style="vertical-align:top" />
        	bottom: 
            <img src="https://mdn.mozillademos.org/files/15189/star.png" alt="" style="vertical-align:bottom" />  
         
        </p>

    在这里插入图片描述


    .verticalTable{
    	width: 50%;
    }
    table.verticalTable ,.verticalTable th,.verticalTable td{
    	border: 1px solid green;
    }
    .verticalTable td{
    	padding: 10px;
    	background-color: #d0d0d0;
    }
        <!-- 表格单元格内容的 垂直对齐 -->
    
        <table class="verticalTable">
        	<tr>
        		<th>基线对齐</th>
        		<th>行的顶部</th>
        		<th>居中</th>
        		<th>行的底部</th>
        		<th>一段文字(未设置垂直对齐)</th>
        	</tr>
        	<tr>
        		<td style="vertical-align: baseline">baseline</td>
        		<td style="vertical-align:top">top</td>
        		<td style="vertical-align:middle">middle</td>
        		<td style="vertical-align: bottom">bottom</td>
        		<td >自知之明, 是一个汉语成语,读音为 zì zhī zhī míng,指了解自己的情况,能正确认识自己的 长处与短处。 出自《老子》。</td>
        	</tr>
        </table>

    在这里插入图片描述


    8. text-decoration 属性: 文本 装饰(线)


    <'text-decoration-line'> || <'text-decoration-style'> || <'text-decoration-color'>

    在这里插入图片描述


    .textdec {
    	/*给文本 添加下划线*/
        text-decoration: underline;
        width: 30%;
        background-color: #d0d0d0;
        padding: 10px;
        line-height: 1.5em;
    }
    .textdec strong {
    	/*取消强调文本的下划线*/
        text-decoration: none;
        color: green;
    }
        <p class="textdec">
            <strong>少壮不努力,老大徒伤悲。</strong>意思是,年轻力壮的时候 不奋发图强,到了老年 再悲伤也没用了。出处,《乐府诗集·长歌行》
        </p>

    在这里插入图片描述


    .decline{
        background-color: #d0d0d0;
        text-decoration:underline wavy #008000;
    
    /*	text-decoration-line: underline;
    	text-decoration-style:wavy;
    	text-decoration-color: green;*/
    
    
    }
        <p class="decline">
        	<del>纸上得来终觉浅,</del>绝知此事要躬行。
        </p>

    8.1 text-decoration-line: 文本 装饰线的位置 (上 中 下)


    /* 单个 关键字值 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 class="decline">
        	纸上得来终觉浅,绝知此事要躬行。
        </p>
    上划线 overline删除线(贯穿线) line-through
    下划线 underline闪烁 (无任何效果,blink 属性值浏览器不支持)

    8.2 text-decoration-style: 文本 装饰线的 样式


    /* 关键字值 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;*/
    
    }
    双实线 double点虚线 dotted
    直虚线 dashed波浪线 wavy

    8.3 text-decoration-color: 文本 装饰线的 颜色



    .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;
    
    
    }
        <p class="decline">
        	<del>纸上得来终觉浅,</del>绝知此事要躬行。
        </p>

    在这里插入图片描述


    9. CSS3 text-emphasis 属性: 添加 文本强调符号




    /* 初始值 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;



    在这里插入图片描述


    .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 class="textemphasis">
            	<strong>取其精华,去其糟粕。</strong>是一个汉语成语,读音qǔ qí jīng huá qù qí zāo pò意思是吸取事物中最好的东西,舍弃事物中坏的,无用的东西。
            </p>
    小点: dot = filled dot小圆圈: open dot
    大点: circle大圆圈: open circle
    实心 双圆圈: double-circle空心 双圆圈: open double-circle
    实心 三角形: triangle空心 三角形: open triangle
    实心 芝麻符: sesame空心 芝麻符: open sesame
    指定为 英文字符: "z"指定为 汉字: "大"
    默认 颜色/位置:circle指定 颜色/位置: circle open red

    9.1 text-emphasis-style 属性: 文本强调符号的 样式/形状


    /* 初始值 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;


    在这里插入图片描述


    9.2 text-emphasis-color 属性: 文本强调符号的 颜色


    /* 初始值 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;

    在这里插入图片描述


    9.3 text-emphasis-position: 文本强调符号的 位置


    /* 初始值 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;


    语言文本强调符号的首选位置
    水平 书写模式垂直 书写模式
    ① 日语上方 over右边 right
    ② 韩语
    ③ 蒙古语
    ④ 汉语下方 under右边 right

    在这里插入图片描述


    10. text-indent 属性: (块元素 首行) 文本的 缩进量 (空白长度)


    /* 长度值 <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;



    在这里插入图片描述


    .textindent {
        width: 40%;
        background-color: #d0d0d0;
        padding: 10px;
    
        /*设置文本缩进*/
        text-indent: 50px;
    /*  text-indent: 3em;
        text-indent: -2em;
        text-indent: 10%;*/
        
    }
        <p class="textindent">
        	“<strong>勿以恶小而为之,勿以善小而不为。</strong>惟贤惟德,能服于人。” 劝人要进德修业,有所作为。不要因为好事小 而不做,更不能因为坏事小 而去做。小善积多了,就成为利天下的大善,而小恶积多了则 “足以乱国家”。
        </p>

    在这里插入图片描述

    绝对值缩进 50px相对值缩进 3em
    负值缩进 (悬挂缩进) -2em百分比缩进 10%

    11. CSS3 text-outline 属性: 文本轮廓 (浏览器 都不支持)


    12. CSS3 text-overflow 属性: 隐藏文本溢出时 的显示 (搭配 overflow,white-space,display 属性)

    在这里插入图片描述



    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 class="textjoverflow">金无足赤,人无完人。“黄金无足色,白璧有微瑕。求人不求备,妾愿老君家。” <br />No one is perfect, everyone will make mistakes.</p>
    默认显示不允许换行时的 默认溢出显示
    溢出文本 被隐藏 overflow: hidden;隐藏的溢出文本 被裁剪 (默认值) text-overflow: clip;
    隐藏的溢出文本 = 省略号 text-overflow: ellipsis;文本流向 从右向左 direction: rtl; (行尾溢出)

    13. text-transform 属性: 文本 大小写转换



    /* 关键字值 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 class="texttransform">金无足赤,人无完人。<br />No one is perfect, everyone will make mistakes.</p>
    默认样式首字母大写 capitalize
    全大写 uppercase全小写 lowercase

    14. CSS3 text-shadow 属性: 文本的阴影 (含 装饰线 text-decoration)


    /* 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 class="textshadow">海纳百川,有容乃大;壁立千仞,无欲则刚。</p>
    设置 水平和垂直阴影 text-shadow:3px 3px;设置指定颜色的 水平和垂直阴影
    设置 带模糊距离的 x,y 阴影偏移量 text-shadow:3px 3px 1px green;加大模糊半径 text-shadow:3px 3px 10px green;
    x 阴影偏移量 负值 (向左偏移)y 阴影偏移量 负值 (向上偏移)

    15. CSS3 text-wrap 属性: 文本换行 (浏览器 都不支持)




    16. unicode-bidi 属性: 双向文本的 重写/覆盖 (搭配 direction 属性)


    /* 关键字值 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;


    在这里插入图片描述


    文本流向 左到右时 direction: ltr;文本流向 右到左时: direction: rtl; (配 normal 值)
    嵌入,不重写/覆盖 unicode-bidi: embed;嵌入,严格重写/覆盖 unicode-bidi: bidi-override;

    17. CSS3 word-break 属性: 单词 换行/断行 位置 (能否 词内断行)


    /* 关键字值 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;*/
    
    }
        <p class="wordbreak">金无足赤,人无完人。出自宋·戴复古《寄兴》:“黄金无足色,白璧有微瑕。求人不求备,妾愿老君家。” 也比喻不能要求一个人没有一点缺点错误,应该严以律己,宽以待人。<br />No one is perfect, everyone will make mistakes,be strict with yourself and lenient toward others.</p>
    默认显示 = word-break: normal;任意处断行(可单词内断行) word-break: break-all;
    不能单词内断行 (中日韩 不断行) word-break: keep-all;单词处断行 = = word-break: normal;

    18. CSS3 word-wrap / overflow-wrap 属性: 单词 断行时的 断行位置 (断句/断行 方式)


    /* 关键字值 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 class="wordbreak wordwrap">金无足赤,人无完人。出自宋·戴复古《寄兴》:“黄金无足色,白璧有微瑕。求人不求备,妾愿老君家。” 也比喻不能要求一个人没有一点缺点错误,应该严以律己,宽以待人。<br /> No one is perfect, everyone will make mistakes,be strict with yourself and lenient toward others.Nooneisperfecteveryonewillmakemistakes</p>
    可词内断行 word-break: break-all;长单词 强制断行 word-wrap: break-word;
    不允许 词内断行 word-break: keep-all;同时设置 不允许 词内断行 word-break: keep-all; 和 强制长单词 断行 word-wrap: break-word;

    19. word-spacing 属性: 单词/字 之间的 距离


    /* 关键字值 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;


    在这里插入图片描述


    .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 class="wordspace">金无 足赤,人无 完人。比喻 不能要求一个人 没有一点缺点错误,应该 严以律己,宽以待人。
            <br />No one is perfect, everyone will make mistakes,be strict with yourself and lenient toward others.</p>
    单词/字间距 增加 word-spacing:4px;单词/字间距 减少 word-spacing:-4px;
    单词/字间距 增加 word-spacing:1em;单词/字间距 减少 word-spacing:-1em;

    20. white-space 属性: 空白和换行的 处理


    /* 关键字值 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;


    属性值换行空格和制表符自动换行行尾空格
    normal合并合并自动换行删除
    nowrap合并合并不自动换行删除
    pre保留保留不自动换行保留
    pre-wrap保留保留自动换行Hang
    pre-line保留合并自动换行删除
    break-spaces保留保留自动换行Wrap 保留的空格字符后 都存在换行机会


    在这里插入图片描述


    .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 class="whitespace"> 
            <strong>                《题乌江亭》      </strong> 
                                    唐代·杜牧 
            <b>胜败兵家事不期,包羞忍耻是男儿。</b> 
            <b>江东子弟多才俊,卷土重来未可知。</b> 
            <br />
            译文: 胜败乃是兵家常事,难以事前预料。能够忍辱负重,才是真正男儿。
            西楚霸王啊,江东子弟人才济济,若能重整旗鼓卷土杀回,楚汉相争,谁输谁赢还很难说。
        </p>
    不换行 white-space:nowrap;预格式 保留空格和换行 white-space:pre;
    预格式+自动换行 white-space:pre-wrap;只保留换行+自动换行 white-space:pre-line;

    (学习视频分享:web前端入门

    以上就是详解CSS 文本属性(Text)的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:csdn,如有侵犯,请联系admin@php.cn删除
    专题推荐:文本属性 css
    上一篇:一起看看CSS实现盒子的转换与过渡效果 下一篇:手把手带你了解CSS 背景属性(Background)
    VIP课程(WEB全栈开发)

    相关文章推荐

    • 【活动】充值PHP中文网VIP即送云服务器• 一起聊聊CSS盒子大小与内外边距及边框的关系• css伪选择器学习之伪类选择器解析• 介绍下CSS盒子模型以及box-sizing属性• css常用font字体属性有哪些?字体属性详解• css背景渐变属性之径向渐变知识点总结• 一起看看CSS实现盒子的转换与过渡效果
    1/1

    PHP中文网