前端基础学习路线入门教程css文本基础学习

页面上显示为 F2E.TMING

3) string

使用给定的字符串来代表被修剪的文本。如:p{text-overflow:string;}

页面上显示为 F2E.TMING

提示：一般与不换行white-space:nowrap;连用。

CSS文本 - vertical-align 属性

vertical-align 属性设置元素的垂直对齐方式。

提示：该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。

vertical-align属性有11种值的方式：

1) baseline

默认。元素放置在父元素的基线上。如p{ vertical-align:baseline;}

2) sub

垂直对齐文本的下标。如p{vertical-align:sub;}

3) super

垂直对齐文本的上标。如p{vertical-align:super;}

4) top

把元素的顶端与行中最高元素的顶端对齐。如p{vertical-align:top;}

5) text-top

把元素的顶端与父元素字体的顶端对齐。如p{vertical-align:text-top;}

6) middle

把此元素放置在父元素的中部。如p{vertical-align:middle;}

7) bottom

把元素的顶端与行中最低的元素的顶端对齐。如p{vertical-align:bottom;}

8) text-bottom

把元素的底端与父元素字体的底端对齐。如p{vertical-align:text-bottom;}

9) length

使用 “line-height” 属性的百分比值来排列此元素。允许使用负值。如p{vertical-align:length;}

10) %

使用 “line-height” 属性的百分比值来排列此元素。允许使用负值。如p{vertical-align:50%;}

11) inherit

规定应该从父元素继承 vertical-align 属性的值。如p{vertical-align:inherit;}

p{ font-family:“Times New Roman”,Georgia,Serif; }

CSS文本 - text-align 属性

text-align 属性规定元素中的文本的水平对齐方式。

提示：将块级元素或表元素居中，要通过在这些元素上适当地设置左、右外边距来实现。

text-align属性有5种值的方式：（前三个比较常用的）

1) left

把文本排列到左边。默认值：由浏览器决定。如p{text-align:left;}

页面上显示为 F2E.TMING

2) right

把文本排列到右边。如p{text-align:right;}

页面上显示为 F2E.TMING

3) center

把文本排列到中间。如p{t **《大厂前端面试题解析+Web核心总结学习笔记+企业项目实战源码+最新高清讲解视频》无偿开源 徽信搜索公众号【编程进阶路】** ext-align:center;}

页面上显示为 F2E.TMING

4) justify

实现两端对齐文本效果。如p{text-align:justify;}

页面上显示为 F2E.TMING

5) inherit

规定应该从父元素继承 text-align 属性的值。如p{text-align:inherit;}

页面上显示为 F2E.TMING

CSS文本 - direction 属性

direction 属性规定文本的方向 / 书写方向。

该属性指定了块的基本书写方向，以及针对 Unicode 双向算法的嵌入和覆盖方向。不支持双向文本的用户代理可以忽略这个属性。

direction属性有3种值:

1) ltr

默认。文本方向从左到右。如:p{direction:ltr;}

页面上显示为 F2E.TMING

2) rtl

文本方向从右到左。如:p{direction:rtl;}

页面上显示为 F2E.TMING

3) inherit

规定应该从父元素继承 direction 属性的值。如:p{direction:inherit}

页面上显示为 F2E.TMING

CSS文本 - word-break 属性

word-break 属性规定自动换行的处理方法。

提示：通过使用 word-break 属性，可以让浏览器实现在任意位置的换行。

word-break属性有3种值:

1) normal

默认。使用浏览器默认的换行规则。如:p{word-break:normal;}

页面上显示为 F2E.TMING F2E.TMING F2E.TMING

2) break-all

允许在单词内换行。如:p{word-break:break-all;}

页面上显示为 F2E.TMING F2E.TMING F2E.TMING

3) keep-all

只能在半角空格或连字符处换行。如:p{word-break:keep-all;}

页面上显示为 F2E.TMING F2E.TMING F2E.TMING

CSS文本 - white-space 属性

white-space 属性设置如何处理元素内的空白。

white-space属性有6种值:

1) normal

默认。空白会被浏览器忽略。如:p{white-space:normal;}

页面上显示为 F2E.TMING F2E.TMING F2E.TMING

2) pre

空白会被浏览器保留。其行为方式类似 HTML 中的

标签。如:p{white-space:pre;}

页面上显示为 F2E.TMING F2E.TMING F2E.TMING

3) nowrap

文本不会换行，文本会在在同一行上继续，直到遇到

标签为止。如:p{white-space:nowrap;}

页面上显示为 F2E.TMING F2E.TMING F2E.TMING

4) pre-wrap

保留空白符序列，但是正常地进行换行。如:p{white-space:pre-wrap;}

页面上显示为 F2E.TMING F2E.TMING F2E.TMING

5) pre-line

合并空白符序列，但是保留换行符。如:p{white-space:pre-line;}

页面上显示为 F2E.TMING F2E.TMING F2E.TMING

6) inherit

规定应该从父元素继承 white-space 属性的值。如:p{white-space:inherit;}

页面上显示为 F2E.TMING F2E.TMING F2E.TMING

CSS文本 - word-wrap 属性

word-wrap 属性允许长单词或 URL 地址换行到下一行。该属性有2种值:

1) normal

只在允许的断字点换行（浏览器保持默认处理）。如:p{word-wrap:normal;}

页面上显示为 TMINGTMING TMINGTMING

2) break-word

在长单词或 URL 地址内部进行换行。如:p{tword-wrap:abreak-word;}

页面上显示为 TMINGTMING TMINGTMING

CSS文本 - text-justify 属性

text-justify 属性规定当 text-align 被设置为 text-align 时的齐行方法。

该属性规定如何对齐行文本进行对齐和分隔。

text-justifye属性有7种值:

1) auto

浏览器决定齐行算法。如:p{text-justify: auto;}

页面上显示为 F2E.TMING F2E.TMING F2E.TMING

2) none

禁用齐行。如:p{text-justify: none;}

页面上显示为 F2E.TMING F2E.TMING F2E.TMING