Question

我必须在水平和垂直方向上显示一小段日文字符。我使用这种技术，它在谷歌浏览器上运行良好，但在Firefox上运行良好。

// div {
//    width: 300px;
//    height: 300px;
//    background: wheat;
// }

// span {
//    writing-mode: tb-rl;
//    display: flex;
//    justify-content: center;
//    align-items: center;
//    width: 100%;
//    height: 100%;
// }

div {
    width: 300px;
    height: 300px;
    background: wheat;
    display: flex;
    justify-content: center;
    align-items: center;
}

span {
    writing-mode: tb-rl;
    -moz-transform: translate(-50%,0);
    left:initial;
}

<div>
    <span>テスト<br>テスト<br>テスト</span>
</div>

Answer 1

非常感谢@ fen1x给你答案。但是你的解决方案仍然存在很多问题。（见上面的更新版本）。最后，对于这种情况最好的方法是使用position: absolute而不是display: flex。这也适用于IE 11和IE Edge。

＆＃13;

div {
  width: 200px;
  height: 200px;
  background: wheat;
  position: relative;
}

span {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: left;
  white-space: nowrap;
  writing-mode: tb-rl;
}

＆＃13;

<div>
  <span>テストテスト<br>テストテストテスト<br>テスト</span>
</div>

＆＃13;

Answer 2

好像是Firefox bug。

这可以通过使用Firefox的另一种居中方法来避免（但是，它有点hacky）：

div {
    width: 300px;
    height: 300px;
    background: wheat;
    display: flex;
    justify-content: center;
    align-items: center;
}

span {
    writing-mode: tb-rl;
    -moz-transform: translate(-50%,0);
    left:initial;
}

<div>
    <span>テスト</span>
</div>

使用flex和writing模式，Firefox中的文本消失

2 个答案: