关于文本溢出

受网页布局空间的影响，很多时候在有限的空间内并不能完全显示所有的内容，而当实际内容超出实际存放的时候，就是溢出。

此时，需要对溢出的内容做相应的处理。

我们经常能在网页中看到一段文字过长出现省略号的效果

其中多行文本只能通过JS实现，而单行文本可直接通过CSS代码实现

以下示例即为单行文本实现省略效果的说明

首先我们需要4个属性配合使用：

1、width:200px;设置宽度，文本超出多少猜隐藏

2、white-space:nowrap;强制不换行

3、overflow:hidden；当文本溢出时，进行隐藏

4、text-overflow:ellipsis;文本溢出隐藏时出现省略号（ellipsis[ɪˈlɪpsɪs] 省略号）

示例：

<style>
.ellipsis{
		border:1px solid black;/*设置边框以便直观显示*/
		width:200px;/*设置容器宽度*/
		white-space:nowrap;/*强制不换行*/
		overflow:hidden;/*溢出隐藏*/
		text-overflow:ellipsis;/*溢出显示省略号*/
		}
</style>
<div class="ellipsis">
    	碰到一个实现溢出文本显示省略号的需求,使用js截取字符串然后判断字符串长度实现,不过相对比较繁琐,本文为大介绍下使用 text-overflow: ellipsis 实现溢出文本省略号
    </div>

overflow溢出属性，有如下几个属性

    visible   默认值

    hidden   溢出隐藏

    scroll   滚动条（右侧以及下部出现，不常用，影响美观）

    auto   超出时出现滚条 (body的默认属性)

一般字母和数字没有空格不会换行但中文会以文字为单位自动换行 这样在一行内文本是不会溢出，

扩展如何让字母和数字没有空格的情况下自动换行

word-wrap:break-word;自动换行属性（实用）