文本的设置

水平的文本设置：text-align
可选值：

• left：左侧对齐
• right：右对齐
• center：居中对齐
• justify：两端对齐

垂直的文本设置：vertical-align

可选值：

• baseline：默认值，基线对齐
• top：顶部对齐（子元素与父元素的顶部对齐）
• bottom：底部对齐
• middle：居中对齐
• 也可以直接指定值

如：

vertical-align:10px
1

当我们放置图片时，文本下方往往会留有空隙，可以通过vertical-align设置来消除底部的空隙。

text-decoration：设置文本修饰
可选值：

• none：默认值，什么都没有
• underline：添加下划线
• line-through：删除线
• overline：上划线

white-space:：设置网页如何处理空白
可选值：

• normal：默认值
• nowrap：不换行，一直往后排
• pre：保留空白，写的是什么样，表现出来就是什么样。

例如：
pre示例

设置省略内容用标点符号代替：
css代码：

.box{
    width: 200px;
    white-space:nowrap;
    overflow: hidden;
    text-overflow: ellipsis;/*溢出的内容设置为省略号*/
}
1
2
3
4
5
6

html代码

<div class="box">
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolor eveniet, eos maxime quo amet laborum accusantium repudiandae quod eaque similique illo eum iure odio! Earum aut alias nostrum iusto eligendi.
</div>
1
2
3

效果；

首先设置宽度，其次设置网页不换行，溢出宽度的部分设置为隐藏，溢出的内容设置为省略号，就可以实现该效果。