一个简单的时间轴demo

一个时间轴的组成

1. 使用一个块级元素包裹内容，并未块级元素设置边框
2. 定义圆形或者菱形等元素标签，子元素设置偏移或者定位元素将图标定位到边框上
3. 使其中的内容不溢出，自动换行，内容自动撑高
   英文自动换行：word-wrap:break-word;word-break:break-all

时间轴样式部分

使用时需要注意可能继承的样式会给li:after等伪类元素设置样式而造成效果异常
css中定义了一个圆形的图标class="yuan"，一个菱形的图标class="diamond"

时间轴html结构

  
  
 
   
 
    
  2017-07-17 
     

       是开始 ttesttesttesttesttesttesttesttesttesttesttest testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest testtesttesttesttesttesttesttesttesttesttestt 亦是结束 
     
 
 
    
  2017-07-18 
     

       是开始 ttesttesttesttesttesttesttesttesttesttesttest testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest testtesttesttesttesttesttesttesttesttesttestt 亦是结束 
     
 
 
    
  2017-07-19 
     

       是开始 ttesttesttesttesttesttesttesttesttesttesttest testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest testtesttesttesttesttesttesttesttesttesttestt 亦是结束 
     
 
 
    
  2017-07-20 
     

       是开始 ttesttesttesttesttesttesttesttesttesttesttest testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest testtesttesttesttesttesttesttesttesttesttestt 亦是结束 
     
 
 
    
   
 
   
 
  
 

效果预览

完整代码