letter style

类似写信的格式，阶梯文字

by Three Tree

HTML

<div class="container">
    <span class="span1">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
    <ul class="ul1">
        <li>bbbbbbbbbbbbbbb</li>
        <li>ccccccccccccccc</li>
    </ul>
    <span class="span2">ddddddddddddddddddddddddddddddddddddddddd</span>
    <span class="span3">eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</span>
    <span class="span4">fffffffffffffffffffffffffffffffffffffffff</span>
    <ul class="ul2">
        <li>ggggggggggggggg</li>
        <li>hhhhhhhhhhhhhhh</li>
    </ul>
    <span class="span5">iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii</span>
    <span class="span6">jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj</span>
    <span class="span7">kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk</span>
    <span class="span8">lllllllllllllllllllllllllllllllllllllllll</span>
</div>

CSS

.container {
    word-break: break-all;
}
ul, span {
    position: relative;
}
ul {
    display: inline-block;
    padding: 0;
    margin: 0;
    list-style: none;
    vertical-align: top;
}
.ul1 {top: 20px;}
.ul2 {top: 120px;}
.span2 {top: 60px;}
.span3 {top: 80px;}
.span4 {top: 100px;}
.span5 {top: 160px;}
.span6 {top: 180px;}
.span7 {top: 200px;}
.span8 {top: 220px;}