html - 我需要使用 CSS 合并垂直和水平文本，如附加的图像

Question

我尝试使用 CSS，但没有得到我想要的确切输出

我使用的 CSS：

p {
  font-family: 'Noto Serif JP', serif;
  font-size: 2rem;
}
date {
  display: inline-block;
  font-family: 'Noto Serif JP', serif;
  font-size: 2rem;
  writing-mode: vertical-lr;
}

span {
  -webkit-text-combine: horizontal; /* Safari */
  text-combine-upright: digits 2;
}

我使用的 HTML 代码：

<div>
  <p>NITIN</p>
  <date
    ><span>N</span><span>I</span><span>T</span><span>I</span
    ><span>N</span></date
  >
</div>

标签： htmlcss

Answer 1

是你想要的吗？

Codepen 示例： https ://codepen.io/cursorrux/pen/YzGxVoZ

body {
  font-family: "Noto Serif JP", serif;
  font-size: 2rem;
}
div {
  width: 250px;
  text-align: center;
}
span {
  display: block;
}
.notThis {
  display: inline-block;
}

<div>
  <span>N</span>
  <span>I</span>
  <span class="notThis">NITIN</span>
  <span>I</span>
  <span>N</span>
</div>