html - 将一个字母变成一个句子，而不将文本分成不同的行

Question

我有一个句子，我想转一封信，但如果不将文本分成不同的行，似乎无法这样做。设法通过使用 h1 和 h2 来转换它，但这给了我它分成不同行的问题，我更想像这样:

h1 {
  font-family: "Gill Sans", Arial, sans-serif;
  font-size: 150%;
  text-transform: uppercase;
  letter-spacing: 0.2em;
}
.rotate {
  -moz-transform: scale(-1, 1);
  -webkit-transform: scale(-1, 1);
  -o-transform: scale(-1, 1);
  -ms-transform: scale(-1, 1);
  transform: scale(-1, 1);
}

<div id="toptext">
  <h1> T<span class="rotate">E</span>XT TEST </h1>
</div>

但这行不通。

Answer 1

假设您的意思是翻转(围绕字母的垂直轴)而不是“旋转/转向”。

如前所述，转换不适用于内联元素，因此我们将 display 更改为 `inline-block。我添加了一个小的翻译来解释字母间距/布局差异。

h1 {
  font-family: "Gill Sans", Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  text-align: center;
  font-size: 72px;
}
.rotate {
  display: inline-block;
  transform: translateX(-.2em) scale(-1, 1);
}

<div id="toptext">
  <h1> T<span class="rotate">E</span>XT TEST </h1>
</div>