CSS文本属性笔录

haocxy

2018-02-08

关注关注

下面介绍下关于文本属性的详解

目录列表：

①direction方向；②letter-spacing字母间距；③text-decoration文本装饰（上下划线，贯穿线）；

④text-indent文本缩进；⑤text-shadow（文字阴影）；⑥text-transform（文本转变）；

⑦white-space（空白--常用于禁止换行/换行）；⑧word-spacing（单词间距，仅仅单词）；

⑨letter-spacing（字母间距，英文字母和汉字）；⑩text-align（文本对齐）；⑪text-justify（IE两端对齐）；

⑫outline（轮廓）；⑬text-outline（文本轮廓，无浏览器支持）；

⑭text-overflow（文本溢出，常用于省略号...）；⑮text-wrap（文本换行，无浏览器支持）；

⑯word-break（常用于文本换行，容易破坏文章布局，影响阅读）；⑰word-wrap（自动换行，长单词换行）

下面为属性详解：

①direction（方向）规定文本的方向 / 书写方向

属性值：ltr默认，文本方向从左到右；rtl文本方向从右到左

<style type="text/css">
div.one{
   direction: rtl
}
div.two{
   direction: ltr
}
</style>
<div class="one">Some text. Right-to-left direction.</div>
<div class="two">Some text. Left-to-right direction.</div>

②letter-spacing（字母间距）设置字符间距

属性值：normal默认，规定字符间没有额外的空间；length定义字符间的固定空间（允许使用负值）

③text-decoration（文本装饰）规定添加到文本的装饰效果

常用场景：上划线，下划线，贯穿线，文本闪烁（基本无浏览器支持）；

属性值：

none默认，定义标准的文本；underline下划线；overline上划线；line-through贯穿线；blink文本闪烁

④text-indent（文本缩进）规定文本块首行的缩进

⑤text-shadow（文字阴影）规定添加到文本的阴影效果

可以通过对text-shadow属性设置相关的属性值，来实现现一些需要的字体阴影效果,减少了图片的使用

⑥text-transform（文本转变）控制文本的大小写

属性值：

none默认，定义带有小写字母和大写字母的标准的文本；

capitalize（用大写字母写或印刷）文本中的每个单词以大写字母开头；

uppercase（大写）定义仅有大写字母；

lowercase定义无大写字母，仅有小写字母

⑦white-space（空白）设置如何处理元素内的空白

属性值：

normal（常态）默认，空白会被浏览器忽略；

pre（预留）空白会被浏览器保留，其行为方式类似 HTML 中的 <pre> 标签；

nowrap（不换行）文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止；

pre-wrap（预留换行）保留空白符序列，但是正常地进行换行；

pre-line（预留行）合并空白符序列，但是保留换行符

⑧word-spacing（单词间距）设置单词间距，仅仅设置英文字母，无法设置汉字

⑨letter-spacing（字母间距）设置字母间距，设置英文字母和汉字

⑩text-align（文本对齐）设置文本对齐方式

⑪text-justify（两端对齐）规定当设置text-align:justify时，所使用的对齐方法

【注意】：当设置text-align:justify时文本显示为两端对齐，但是在IE浏览器下显示异常。加上text-justify:inter-ideograph; 在IE下效果才正常，text-justify只在IE下有用，而且必须和text-align:justify一起使用才有效

⑫outline（轮廓）规定块级的轮廓

⑬text-outline（文本轮廓）规定文本的轮廓

【兼容】无浏览器支持 text-outline 属性

⑭text-overflow（文本溢出，常用于省略号...）规定当文本溢出包含元素时发生的事情

属性值：clip（修剪）修剪文本；ellipsis（省略号...）显示省略符号来代表被修剪的文本

⑮text-wrap（文本换行，无浏览器支持）；

⑯word-break（文本换行）规定非中日韩文本的换行规则；

属性值：

normal 使用浏览器默认的换行规则；

break-all 允许在单词内换行（会破坏布局和文章，影响阅读）；

keep-all 只能在半角空格或连字符处换行

<style type="text/css"> 
p.test1{
width:11em; 
border:1px solid #000000;
word-break:normal;
}
p.test2{
width:11em; 
border:1px solid #000000;
word-break:break-all;
}
</style>
<p class="test1">This is a veryveryveryveryveryveryveryveryveryvery long paragraph.</p>
<p class="test2">This is a veryveryveryveryveryveryveryveryveryvery long paragraph.</p>

⑰word-wrap（自动换行，长单词换行）允许对长的不可分割的单词进行分割并换行到下一行

属性值：

normal只在允许的断字点换行（浏览器保持默认处理）；

break-word在长单词或 URL 地址内部进行换行

<style type="text/css"> 
p.test{
   width:11em; 
   border:1px solid #000000;
   word-wrap:break-word;
}
</style>
<p class="test">This paragraph contains a very long word: 
this is a veryveryveryveryveryverylongword. 
The long word will break and wrap to the next line.</p>

html换行 css