我的思路是：
1、每句用一个span或者p标签，包裹起来。--为什么这么做？因为，要单独控制样式啊
2、然后依次写动画。-- 结合 keyframes和animation写帧动画。
3、记得给每个动画写延迟时间。--让不同句子出现时间不一样。
举个例子：
<div class="box"><p>这是第1个p</p>
<p>这是第2个p</p>
<p>这是第3个p</p>
</div>
CSS:
@keyframes ani{0%{ opacity:0 }
100%{ opacity:1 }
}
.box p:nth-child(1){
animation: ani 0.2s both
}
.box p:nth-child(2){
animation: ani 0.2s 0.2s both
}
.box p:nth-child(3){
animation: ani 0.2s 0.4s both
}
用CSS让文字在一行内显示不换行的方法：
一般的文字截断(适用于内联与块)：
.text-overflow{
display:block /*内联对象需加*/
width:31em
word-break:keep-all /* 不换行 */
white-space:nowrap /* 不换行 */
overflow:hidden /* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis /*溢出时显示省略标记...；需与overflow:hidden一起使用*/
}
对于表格，定义有点不一样：
table{
width:30em
table-layout:fixed /*只有定义了表格的布局算法为fixed，下面td的定义才能起作用*/
}
td{
width:100%
word-break:keep-all /* 不换行 */
white-space:nowrap /* 不换行 */
overflow:hidden /* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis /* 溢出时显示省略标记...；需与overflow:hidden一起使用*/
}
注：这个只对单行的文字的效，如果你想把它用在多行上，也只有第一行有作用的。 这个写法只有IE会有"..."，其它的浏览器文本超出指定宽度时会隐藏。
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
在css中让文字显示方式从右边开始的操作方法和步骤如下：
1、首先，创建一个新的html文档，见下图红框中的内容，然后进入下一步。
2、其次，完成上述步骤后，可以更改文档的名称，见下图红框中的内容，然后进入下一步。
3、接着，完成上述步骤后，输入文本，见下图红框中的内容，然后进入下一步。
4、然后，完成上述步骤后，进一步设置以下文本的对齐方式，示例代码如下图所示，然后进入下一步。
5、最后，完成上述步骤后，在浏览器中预览，文本右对齐，见下图红框中的内容。这样，问题就解决了。
![[前端][CSS] 纯css实现纵向滚动固定表头与横向内容滚动](/aiimages/%5B%E5%89%8D%E7%AB%AF%5D%5BCSS%5D+%E7%BA%AFcss%E5%AE%9E%E7%8E%B0%E7%BA%B5%E5%90%91%E6%BB%9A%E5%8A%A8%E5%9B%BA%E5%AE%9A%E8%A1%A8%E5%A4%B4%E4%B8%8E%E6%A8%AA%E5%90%91%E5%86%85%E5%AE%B9%E6%BB%9A%E5%8A%A8.png)
