当文本内容长度超过容器元素宽度时，要求文本自动滚动，如下图
有以下两点限制：
- 文本不能全部显示出来，不能超出容器宽度
- 文本不能自动换行
> 原理：**当子元素的实际内容长度 `scrollWith` 大于可视区宽度 `clientWith` 时，利用 `position:relative` 的属性来对子元素进行左右移动，使子元素的所有内容能够在父元素的可视区宽度内展示出来**
>
> 就相当于我们透过一个小窗口看窗外经过的火车一样，小窗口是父元素，而经过的火车是子元素
_element.clientwidth 表示元素的可视区宽度， element.scrollWidth 表示元素内容宽度_
父元素要设置 `overflow: hidden` ，以便能够隐藏子元素超出内容。但是子元素不能够设置 `overflow: hidden` ，因为子元素设置了该属性，那么子元素的 `clientWidth` 就和 `scrollWidth` 相等了。
下面是源码，复制即可运行。
```html
文本过长自动滚动
```