CSS3 文本

首行缩进

text-indext

<p style="text-indent: 25px;"> 一行 <br>  二行  <br> N行 </p>

效果

一行
二行 ...
N行 ...

划线

text-decoration

<span style="text-decoration: overline;"> 上 </span> <!-- 上划线 -->
<span style="text-decoration: line-through;"> 中 </span> <!-- 中划线 -->
<span style="text-decoration: underline;"> 下 </span> <!-- 下划线 -->

<!-- 默认 text-decoration: none; | 取消划线 -->

效果

文本对齐

text-align

<p style="text-align: left;"> 左 </p>
<p style="text-align: center;"> 中 </p> 
<p style="text-align: right;"> 右 </p>

效果

左

中

右

行高

line-height

<p style="line-height: 50px;"> 一行 ... <br> 二行 ... </p>

效果

一行 ...
二行 ...

间距

letter-spacing

<em style="letter-spacing: 5px;"> JMJC.TECH </em>

效果

换行

white-space

<!-- normal | 默认值，自动换行 -->
<p style="background: #a3a7e4; width: 28px; white-space: normal; "> 简明教程 </p> 

<!--  nowrap | 不换行 -->
<p style="background: #bae2be; width: 28px; white-space: nowrap;"> 简明教程 </p> 

<!-- white-space 的换行仅针对 “中文”，而 “英文” 的换行使用 word-wrap: break-word; -->

效果

简明教程

简明教程

阴影

text-shadow

<!-- 参数 1. 水平阴影，正数靠边，负数靠右 -->
<!-- 参数 2. 垂直阴影，正数靠上，负数靠下 -->
<!-- 参数 3. 阴影模糊值 -->
<!-- 参数 4. 阴影颜色 -->

<div style="text-shadow:1px 1px 1px #f7ca44"> JMJC.TECH </div>

效果