1. 文字阴影:text-shadow
text-shadow: h-shadow v-shadow blur color;
text-shadow 属性向文本添加一个或多个阴影。该属性是逗号分隔的阴影列表,每个阴影有两个或三个长度值和一个可选的颜色值进行规定。省略的长度是 0。
值 | 描述 | 测试 |
---|---|---|
h-shadow | 必需。水平阴影的位置。向左为正值,允许负值。 | 测试 |
v-shadow | 必需。垂直阴影的位置。向下为负值,允许负值。 | 测试 |
blur | 可选。模糊的距离。 | 测试 |
color | 可选。阴影的颜色。 | 测试 |
实例: p{text-shadow: 20px 20px 2px red;}
带有模糊效果的文本阴影:text-shadow:2px 2px 8px #FF0000;
白色文本上的阴影:text-shadow:2px 2px 4px #000000;
霓虹灯效果的文本阴影:text-shadow:0 0 3px #FF0000;
2. text-overflow.
text-overflow 属性规定当文本溢出包含元素时发生的事情。
ellipsis | 溢出部分打点展示 |
clip | 溢出部分截断 |
clip的效果:
3. word-wrap:单词换行,默认值是normal
正常情况下,单词和URL超出了盒子边界,单词URL整体会换行,而break-Word值:
word-wrap:break-word;在长单词或 URL 地址内部进行换行,就是强制让单词或URL换行。
4. word-break:break-all,英文单词断开换行
5. word-break:keep-all,只能在半角空格或连字符处换行
6. white-space:nowrap,单词和cjk文字都不换行
注意:单词“coll,ege”浏览器会默认一个单词,即一个字符串;会忽略逗号。
实例:正常情况下的结果:
<div style="width:150px; border:1px solid black">you are coooooooooooooooool</div>
(1)在word-wrap:break-word属性作用下:对英文有效
<div style="width:150px; border:1px solid black;word-wrap:break-word;">you are coooooooooooooooool</div>
结果:
内容是cjk文字时:该属性值无效,和正常情况一样
(2)在word-break:break-all属性作用下:对英文有效
<div style="width:150px; border:1px solid black;word-break:break-all;">好好学习,天天向上,好好学习,天天向上</div>
内容是英文时:
内容是cjk文字时:该属性值无效,和正常情况一样
(3)在word-break:keep-all属性作用下:keep-all只能在半角空格或连字符处换行,对中文有效
<div style="width:150px; border:1px solid black;word-break:keep-all;">好好学习,天天向上,好好学习,天天向上</div>
内容是cjk文字时:
(4)在white-space:nowrap属性作用下,对英文和cjk文字都有效
<div style="width:150px; border:1px solid black;white-space:nowrap;">好好学习,天天向上,好好学习,天天向上</div>