概述
文本在HTML页面中是最基本的表现形式，通过文本能最有效而详细的说明网页中的内容。但若不对页面中的文本做任何处理，那会给用户浏览带来一些不好的体验。如果通过CSS对文本进行设置后，不仅让用户浏览体验更佳的好，也会让页面的美观程度提升一个高度。
文本设置 *
-
text-align：文本对齐方式
-
text-align-last：指定一行或者块中的最后一行在被强制换行之前的对齐规则。
-
text-decoration：文本装饰线
-
text-emphasis：强调标记
-
text-indent：文本缩进
-
text-justify：设置文本两端对齐方式
-
text-orientation：文字方向
-
text-overflow：文本裁切
-
text-shadow：文本阴影
-
text-transform：文本大小写转换
-
text-underline-offset：文本装饰线相对于当前位置的偏移
-
line-height：行高
-
line-break：控制文本换行规则
-
letter-spacing：字符间距
-
word-spacing：单词间距
-
white-space：空格换行处理
-
overflow-wrap：当一个不能被分开的字符串太长而无法适应所在容器时，是否允许在单词内换行，避免溢出
-
word-break：控制单词如何拆分换行，例如按字母换行、保持单词完整等。
-
writing-mode：定义文本的书写方向，如水平从左到右、垂直从上到下等，能改变文字布局方向
-
color：字体颜色
字体设置 *
常用属性
-
font-family：字体名称
-
font-size：字体大小
-
font-style：字体样式
-
font-weight：字体粗细
-
font：组合值
自定义字体
语法形式：
@font-face {
font-family: '设置字体名称';
src: url('字体路径');
}
代码示例：
<!--CSS 部分-->
<style type="text/css">
<!--自定义字体-->
@font-face {
/*字体名称*/
font-family: '经典隶变简';
/*字体路径*/
src: url('fonts/经典隶变简.TTF');
}
@font-face {
/*字体名称*/
font-family: '华文行楷';
/*字体路径*/
src: url('fonts/华文行楷.ttf');
}
.box {
width: 200px;
height: 50px;
border: 1px solid gray;
border-radius: 5px;
margin: 30px auto;
text-align: center;
}
div.t1 {
font: normal bold 20px/50px '经典隶变简';
}
div.t2 {
font: 20px/50px '华文行楷';
}
</style>
<!--HTML 部分-->
<div class="box t1">为中华之崛起而编程</div>
<div class="box t2">为中华之崛起而编程</div>
提示：您可以点击前往 站长字体 下载您想要的字体。
在线字体/图标
-
有字库：www.youziku.com/
-
阿里矢量图：www.iconfont.cn/
-
Google Fonts：fonts.google.com/
-
Font Awesome：fontawesome.dashgame.com/
扩展
文字两端对齐 *
<div>用户名</div>
<div>密码</div>
<div>手机号</div>
<div>验证码</div>
<div>联系地址</div>
div {
padding: 5px;
margin: 2px;
border: 1px solid #ff4500;
border-radius: 5px;
width: 120px; /* 固定宽度 */
text-align-last: justify; /*两端对齐*/
}
纵向显示文字 *
纵向显示文字可通过 writing-mode 属性设置，其语法形式为：
writing-mode：horizontal-tb | vertical-rl | vertical-lr
<p>
沁园春·雪<br/>
北国风光，千里冰封，万里雪飘。
望长城内外，惟余莽莽；大河上下，顿失滔滔。
山舞银蛇，原驰蜡象，欲与天公试比高。
须晴日，看红装素裹，分外妖娆。
江山如此多娇，引无数英雄竞折腰。
惜秦皇汉武，略输文采；唐宗宋祖，稍逊风骚。
一代天骄，成吉思汗，只识弯弓射大雕。
俱往矣，数风流人物，还看今朝。<br>
毛泽东作于一九三二年六月
</p>
@charset "UTF-8";
@font-face {
font-family: 'maozedong';
src: url(../fonts/maozedong.ttf);
}
p {
width: 700px;
height: 380px;
border-radius: 5px;
border: 1px solid rgba(18, 5, 25, 0.67);
margin: 0 auto;
padding: 10px;
/* 竖排显示文字*/
/* vertical-rl：从右向左 */
/* vertical-lr：从左到右 */
writing-mode: vertical-rl;
/* IE浏览器的从右向左，从左向右是 writing-mode: lr-tb;*/
writing-mode: tb-rl; /*兼容 IE*/
-webkit-writing-mode: vertical-rl; /*兼容 Safari*/
font-family: maozedong;
/*文字竖排显示的情况下，相当于设置列宽*/
line-height: 50px;
letter-spacing: 3px;
font-size: 26px;
}
文本溢出 *
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>文本溢出</title>
<style>
.box {
width: 320px;
border: 1px solid #ccc;
box-sizing: border-box;
margin-bottom: 8px;
padding: 0 6px;
line-height: 1.5;
}
.single-line {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.multi-line {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; /** 显示行数 */
line-clamp: 3; /* 标准属性 */
overflow: hidden;
}
</style>
</head>
<body>
<!-- 当行 -->
<div class="box single-line">
Officia veniam ullamco exercitation sint pariatur irure sit esse commodo aliquip cupidatat. Magna fugiat tempor ipsum incididunt reprehenderit aliqua officia excepteur ipsum ea esse nisi aute.
Quis labore labore id dolore elit incididunt cupidatat elit culpa qui. Reprehenderit ipsum sint proident occaecat pariatur Lorem excepteur fugiat fugiat consectetur. Cupidatat ipsum exercitation
est exercitation ex do. Laborum laborum do tempor dolor ipsum ullamco mollit duis elit. Nisi commodo nostrud aliquip laborum voluptate.
</div>
<!-- 多行 -->
<div class="box multi-line">
Esse ad commodo esse aliqua eiusmod. Quis voluptate adipisicing in consequat. Eiusmod ad enim veniam consectetur. Sit elit excepteur laboris incididunt eiusmod consectetur. Lorem ipsum dolor,
sit amet consectetur adipisicing elit. Molestiae debitis numquam nulla voluptatibus pariatur sint, voluptatum quo rerum reiciendis ipsa nesciunt dicta earum sed dolore in recusandae quasi?
Veritatis, soluta?Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores velit pariatur, voluptatibus beatae fugiat totam. Possimus excepturi eos temporibus autem. Ipsum nulla minus
incidunt quas, labore accusamus et omnis eaque.
</div>
</body>
</html>
