Question

是否有使用HTML / CSS在网站上逐步踩踏文本的最佳实践方法？这个单词 "and"说明了这种效果。

Answer 1

将css属性vertical-align与百分比值一起使用（参见this section on MDN）。 0%标记默认基线，支持负值和正值。这可能不是最佳做法，但可以达到目的，并且足够灵活以支持各种“台阶高度”和“楼梯长度”

一个独立的示例如下：

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>Stair Stepping</title>
            <style>
                html, body {
                    height: 100%;
                    margin: 0;
                    padding: 0;
                }
                .step0 { vertical-align: -45%; }
                .step1 { vertical-align: -30%; }
                .step2 { vertical-align: -15%; }
                .step3 { vertical-align:   0%; }
                .step4 { vertical-align:  15%; }
                .step5 { vertical-align:  30%; }
                .step6 { vertical-align:  45%; }
            </style>
        </head>
        <body>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <span class="step0">A</span><span class="step1">l</span><span class="step2">i</span><span class="step3">q</span><span class="step4">u</span><span class="step5">a</span><span class="step6">m</span> liquam cursus diam ut bibendum hendrerit. Vivamus dignissim egestas ullamcorper. Vestibulum dapibus ullamcorper neque, id hendrerit magna scelerisque eget. Quisque et elit urna. Pellentesque facilisis tempor lacus, dignissim fermentum odio rhoncus vel. Aenean vitae magna vitae purus volutpat posuere non vitae odio. Phasellus quam nulla, euismod ac consequat a, hendrerit ut diam. Nam diam urna, sollicitudin eu commodo pharetra, condimentum ut magna. Etiam rhoncus et lorem efficitur rhoncus. Duis ac nibh vehicula, laoreet sem non, congue mi. In eget fringilla metus. Donec nec nulla dui. Ut a bibendum orci.</p>
        </body>
    </html>

Answer 2

一个想法是使用嵌套元素，然后考虑边距和对齐方式：

.stair {
  font-size: 25px;
}

span {
  margin-bottom: 20%;
  display: inline-block;
  vertical-align: bottom;
}

<span class="stair">A
<span>B
<span>C
<span>D
</span>
</span>
</span>
</span>

或使用转换：

.stair {
  font-size: 25px;
  margin-top:50px;
}

span {
  display: inline-block;
  transform:translateY(-50%);
}

<span class="stair">A
<span>B
<span>C
<span>D
</span>
</span>
</span>
</span>

html / css中的阶梯文本

2 个答案: