css3文本效果——文字阴影和文字换行

偏执的太偏执、 2022-05-08 22:22 401阅读 0赞

1. 文字阴影：text-shadow

text-shadow: h-shadow v-shadow blur color;

text-shadow 属性向文本添加一个或多个阴影。该属性是逗号分隔的阴影列表，每个阴影有两个或三个长度值和一个可选的颜色值进行规定。省略的长度是 0。

<table> 
 <tbody> 
  <tr> 
   <th>值</th> 
   <th>描述</th> 
   <th>测试</th> 
  </tr> 
  <tr> 
   <td><em>h-shadow</em></td> 
   <td>必需。水平阴影的位置。向左为正值，允许负值。</td> 
   <td><a href="http://www.w3school.com.cn/tiy/c.asp?f=css_text-shadow" rel="nofollow">测试</a></td> 
  </tr> 
  <tr> 
   <td><em>v-shadow</em></td> 
   <td>必需。垂直阴影的位置。向下为负值，允许负值。</td> 
   <td><a href="http://www.w3school.com.cn/tiy/c.asp?f=css_text-shadow" rel="nofollow">测试</a></td> 
  </tr> 
  <tr> 
   <td><em>blur</em></td> 
   <td>可选。模糊的距离。</td> 
   <td><a href="http://www.w3school.com.cn/tiy/c.asp?f=css_text-shadow&amp;p=11" rel="nofollow">测试</a></td> 
  </tr> 
  <tr> 
   <td><em>color</em></td> 
   <td>可选。阴影的颜色。</td> 
   <td><a href="http://www.w3school.com.cn/tiy/c.asp?f=css_text-shadow&amp;p=13" rel="nofollow">测试</a></td> 
  </tr> 
 </tbody> 
</table>

实例： p\{text-shadow: 20px 20px 2px red;\}

![70][]

[带有模糊效果的文本阴影][Link 1]：text-shadow:2px 2px 8px \#FF0000;

![70 1][]

[白色文本上的阴影][Link 2]：text-shadow:2px 2px 4px \#000000;

![70 2][]

[霓虹灯效果的文本阴影][Link 3]：text-shadow:0 0 3px \#FF0000;

![70 3][]

2. text-overflow.

text-overflow 属性规定当文本溢出包含元素时发生的事情。

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td>ellipsis</td> 
   <td>溢出部分打点展示</td> 
  </tr> 
  <tr> 
   <td>clip</td> 
   <td>溢出部分截断</td> 
  </tr> 
 </tbody> 
</table>

clip的效果：![70 4][]

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>

![70 5][]

（1）在**word-wrap：break-word**属性作用下：**对英文有效**

<div style="width:150px; border:1px solid black;word-wrap:break-word;">you are coooooooooooooooool</div>

结果：

![70 6][]

**内容是cjk文字时：该属性值无效，和正常情况一样**

![70 7][]

（2）在**word-break：break-all**属性作用下：**对英文有效**

内容是英文时：

![70 8][]

**内容是cjk文字时：该属性值无效，和正常情况一样**

![70 9][]

（3）在**word-break：keep-all**属性作用下：**keep-all只能在半角空格或连字符处换行，对中文有效**

![70 10][]

内容是cjk文字时：

![70 11][]

（4）在**white-space:nowrap**属性作用下，对英文和cjk文字都有效

![70 12][]

![70 13][]

[70]: /images/20220509/277662fd51e14689aafdbdb013d95136.png
[Link 1]: http://www.w3school.com.cn/tiy/t.asp?f=css3_text-shadow_blur
[70 1]: /images/20220509/b318e070c9c747a68c6d16b8bbbb88fe.png
[Link 2]: http://www.w3school.com.cn/tiy/t.asp?f=css3_text-shadow_white
[70 2]: /images/20220509/1faa042e20e24358a4178d480af02c1c.png
[Link 3]: http://www.w3school.com.cn/tiy/t.asp?f=css3_text-shadow_neon
[70 3]: /images/20220509/3922dc1e33cf467d83be5c67883f4722.png
[70 4]: /images/20220509/c12602f28e144a22a8a22c07d8eb611c.png
[70 5]: /images/20220509/37ef66e3d2704f728620544507f7d869.png
[70 6]: /images/20220509/1403ded7ef17480c94f0def961410412.png
[70 7]: /images/20220509/5312cb54fee54b6e99e94dd7c818e7d3.png
[70 8]: /images/20220509/088bd6b380e440e0961e51feadff10b4.png
[70 9]: /images/20220509/1cdcb43e67184a0f805b32ab40b2822d.png
[70 10]: /images/20220509/45ade4e6515546978e9436312cf72b1a.png
[70 11]: /images/20220509/ee27a9f6eefd4943b4973ad66df7162c.png
[70 12]: /images/20220509/a8ad41ea96e54e7ab3a14865afcc4311.png
[70 13]: /images/20220509/0769f1d9d39845078927c6df582f037f.png