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>

效果

JMJC.TECH

换行

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>

效果

JMJC.TECH
CSS3 教程 CSS3 入门 CSS3 选择器 CSS3 颜色 CSS3 单位 CSS3 字体 CSS3 文本 CSS3 光标 CSS3 盒子模型 CSS3 边框 CSS3 边距 CSS3 列表 CSS3 表格 CSS3 背景 CSS3 效果 CSS3 浮动 CSS3 定位 CSS3 响应式 CSS3 Columns CSS3 Flex