有没有使用HTML/CSS在网站上单步执行文本的最佳实践方法?单词"and"说明了这种效果。
发布于 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>
发布于 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>
https://stackoverflow.com/questions/51488508
复制相似问题