首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >html/css中的阶梯式文本

html/css中的阶梯式文本
EN

Stack Overflow用户
提问于 2018-07-24 07:36:09
回答 2查看 193关注 0票数 2

有没有使用HTML/CSS在网站上单步执行文本的最佳实践方法?单词"and"说明了这种效果。

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-07-24 07:46:08

使用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>

票数 1
EN

Stack Overflow用户

发布于 2018-07-24 07:52:32

一种想法是使用嵌套元素,然后考虑边距和对齐:

.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>

或者使用transform:

.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>

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51488508

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档