摘要：的区别指字母间距，对英文和汉字，空格都有效，也可以叫字符间距。指单词间距，对汉字不支持。时的效果压缩空白和换行符，排满不换行。纵向长度，可为负值，向下为正。阴影的模糊长度。的使用有了文字描边，就有文字填充色。
1. letter-spacing,word-spacing,white-space的区别
letter-spacing指字母间距，对英文和汉字，空格都有效，也可以叫字符间距。
word-spacing指单词间距，对汉字不支持。
white-space指空白和换行的处理。有以下几个值
| 序号 | 名称 | 说明 |
|---|---|---|
| 1 | normal | 压缩空白和换行符，排满时换行 |
| 2 | nowrap | 压缩空白和换行符，排满也不换行 |
| 3 | pre | 不压缩空白和换行符，排满不换行 |
| 4 | pre-line | 不压缩空白和换行符，排满不换行 |
| 5 | pre-wrap | 不压缩空白和换行符，排满换行 |
hello world hello you hello me hello !!! hello world hello you hello me hello !!! hello world hello you hello me hello !!! hello world hello you hello me hello !!!
normal时的效果：压缩空白和换行符，排满换行。
nowrap时的效果：压缩空白和换行符，排满不换行。
pre时的效果：不压缩空白和换行符，排满不换行。
pre-line时的效果：压缩空白，不压缩换行符，排满换行。
pre-wrap时的效果：不压缩空白和换行符，排满换行。
2. word-break,word-wrap的区别word-wrap处理单词内是否换行。word-break处理单词是否换行。
hello world aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
默认情况：
word-wrap: break-word;时
word-break: break-all;时：
3. text-overflow的使用单行时：
p{
border: 1px solid red;
width: 100px;
height: 20px;
line-height: 20px;
text-align: center;
text-overflow: ellipsis;/*重点1*/
overflow: hidden;/*重点2*/
white-space: nowrap;/*重点3*/
}
多行时：只支持webkit的浏览器，火狐和ie都不支持。
p.muti{
width: 200px;
border: 1px solid red;
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box; /**对象作为伸缩盒子模型显示 **/
-webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
-webkit-line-clamp: 2; /** 显示的行数 **/
}
4. text-shadow的使用
text-shadow: 3px 2px 1px gray;
3px:横向长度，可为负值，向右为正。
2px:纵向长度，可为负值，向下为正。
1px:阴影的模糊长度。
gray:阴影颜色。
可叠加，代码如下：
text-shadow: 1px 3px 1px gray,2px 3px 1px red,3px 3px 1px maroon;
效果：
5. text-stroke的使用text-stroke由text-stroke-color和text-stroke-width组成。下面是简写形式：
-webkit-text-stroke: 1px red;
效果：
目前支持情况不太乐观
查看支持情况的网址：caniuse.com
使用text-shadow也可以实现描边效果：
h1.shadow{text-shadow:-0.025em -0.025em 0 #f00,
0.025em -0.025em 0 #f00,
-0.025em 0.025em 0 #f00,
0.025em 0.025em 0 #f00;}
原理是在文字的上下左右加阴影。
6. text-fill-color的使用有了文字描边，就有文字填充色。和text-stroke配合使用，支持情况也一样。
h1.stroke{
color: black; /*不起作用*/
-webkit-text-stroke: 1px red;
-webkit-text-fill-color:transparent;
}
效果：
还可以和渐变背景色配合使用：
h1.textStroke1{
background:linear-gradient(90deg, #EEF85B 5%, #7AEC8D 53%, #09E5C3 91%);
-webkit-background-clip:text;
-webkit-text-fill-color:#fff;
-webkit-text-stroke:6px transparent;
}
效果：
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/116549.html
摘要：将内容在边界内换行不截断英文单词换行语法浏览器只在半角空格或连字符的地方进行换行。个人感觉跟类似强行截断英文单词，达到词内换行效果。 CSS3文本 css字体类型属性 font-family, font-style(normal、italic、oblique[倾斜]), font-weight, font-size-adjust(定义是否强制对文本使用同一尺寸,仅火狐支持), font...
摘要：稍稍总结了下文本的一些属性用法，自己忘记的时候也可以用来查查，不用去查网站那么麻烦。稍稍总结了下css文本的一些属性用法，自己忘记的时候也可以用来查查，不用去查网站那么麻烦。 下面是部分总结，也希望对其他人有用 文本修饰 (1)text-decoration: 文本修饰（横线） 4个属性值 overline line-through underline blink (1)ov...
摘要：前言项目中我们经常遇到这种需求，需要对单行多行文本超出显示为省略号。单行文本省略文本溢出显示省略号文本不会换行语法默认值适用于所有元素当对象内文本溢出时不显示省略标记，而是将溢出的部分裁切掉。 前言：项目中我们经常遇到这种需求，需要对单行、多行文本超出显示为省略号。这篇文章主要总结了小编解决此问题的方法，有不足之处欢迎大家指正。 单行文本省略 showImg(https://segme...
摘要：前言项目中我们经常遇到这种需求，需要对单行多行文本超出显示为省略号。单行文本省略文本溢出显示省略号文本不会换行语法默认值适用于所有元素当对象内文本溢出时不显示省略标记，而是将溢出的部分裁切掉。 前言：项目中我们经常遇到这种需求，需要对单行、多行文本超出显示为省略号。这篇文章主要总结了小编解决此问题的方法，有不足之处欢迎大家指正。 单行文本省略 showImg(https://segme...
摘要：前言项目中我们经常遇到这种需求，需要对单行多行文本超出显示为省略号。单行文本省略文本溢出显示省略号文本不会换行语法默认值适用于所有元素当对象内文本溢出时不显示省略标记，而是将溢出的部分裁切掉。 前言：项目中我们经常遇到这种需求，需要对单行、多行文本超出显示为省略号。这篇文章主要总结了小编解决此问题的方法，有不足之处欢迎大家指正。 单行文本省略 showImg(https://segme...
阅读 2348·2021-11-16 11:45
阅读 2319·2021-10-11 10:59
阅读 2020·2021-10-08 10:05
阅读 3478·2021-09-23 11:30
阅读 2190·2021-09-07 09:58
阅读 561·2019-08-30 15:55
阅读 651·2019-08-30 15:53
阅读 1814·2019-08-29 17:00
