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>

Answer 2

使用span分隔每个字母和CSS使用

h1 span{
display: inline-block;
transform: rotate(90deg);
-moz-transform: rotate(90deg);/* for Mozilla */
-webkit-transform: rotate(90deg);/* for Chrome and Safari */
}

Answer 3

在rotate：

中使用transform

.rotate {
    display: inline-block;
    transform: rotate(90deg);
}

根据自己的喜好调整旋转。正如您所注意到的，我也使用了display。作为per the spec，您无法在transform元素上使用inline。

在一个句子中翻一个字母而不将文本分成不同的行

3 个答案: