html - 使用css在“步骤”中垂直堆叠标题

Question

我有一个从数据库中提取的标题，我需要对其进行样式设置，类似于步骤。我无法直接访问 HTML 并添加换行符等。有没有办法以某种方式定位每个单词或使用 CSS 使其像这样堆叠？

标签： htmlcss

Answer 1

如果您可以使用 javascript，您可以执行以下操作：

<p>
  Know Our Needs.
</p>

let t = document.querySelector('p')
let txt = t.textContent
let stack  = txt.split(' ')

let d = document.createElement('div')
d.classList.add('wrapper')

stack.forEach((s) => {
  p = document.createElement('p')
  p.textContent = s
  d.append(p)
})

document.body.replaceChild(d, t)

结合一点 CSS

.wrapper {
  color: red;
  background-color: lightgray;
  font-size: 3.25rem;
  font-weight: bold;
  font-style: italic;
  max-width: 16rem;
  padding: 0.25rem 2.25rem;
  margin: auto;
  margin-top: 5.25rem;
}
.wrapper p {
  margin: 0.25rem;
  text-align: center;
}
.wrapper p:first-child {
  text-align: left;
}
.wrapper p:last-child {
  text-align: right;
}

https://codepen.io/bluebrown/pen/qBEdLmY