html - 基线偏移和字母在可选文本上垂直对齐？

Question

好的，所以我不确定去哪里找，因为它看起来非常具体，而且我对 CSS 的了解还不够多，不知道自己该怎么做。

我想在 HTML 和 CSS 中重现下图中的文本格式，以便可以选择和复制/粘贴文本，因为它应该被阅读。

我不知道如何让字母相对于一对中的另一个字母居中对齐(在它的正下方)，并使基线偏移但仍然让文本位于一个段落或标题中。

感谢您的帮助!

Answer 1

这可能就是您要实现的目标。当您选择并复制/粘贴时，它仍然是一个单词。

基本上是将每个字母包装成一个<i>左右，并设置 position:relative; top:15px;或类似的值(value)来转移其中的一些。

JSFiddle Demo

.e {
    background: silver;
    background-size: cover;
    text-align: center;
    padding: 30px;
}
.e i {
    font-style: normal;
    font-family: sans-serif;
    font-weight: bold;
    font-size: 50px;
    text-transform: uppercase;
    color: crimson;
    margin: 0 10px;
    display: inline;
}
.e i:nth-child(4), .e i:nth-child(6), .e i:nth-child(8) {
    text-transform: none;
}
.e i:nth-child(2), .e i:nth-child(4), .e i:nth-child(7), .e i:nth-child(9) {
    top: 15px;
    position: relative;
}
.e i:nth-child(4) {
    color: yellow;
}
.e i:nth-child(5):after {
    content: "\A";
    white-space: pre; 
}

<div class="e"><i>e</i><i>x</i><i>h</i><i>i</i><i>b</i><i>i</i><i>t</i><i>i</i><i>o</i><i>n</i></div>