彩色框内的文本

Question

我正在创建一个简单的 HTML-CSS 投资组合网站。我正在努力寻找一种方法来按照图片中显示的方式设置以下文本的样式。

请务必注意，我取得了一些成果，但问题是此处的文本不是从左到右居中。它更像是一种随机排列，我不知道如何实现。另外请记住，此文本将以放置在图片前面的方式使用。因此必须将其创建为某种组件，稍后我可以使用图片轻松 reuse/align。

关于如何实现这样的结果有什么想法吗？

如您所见，我已经成功地在黑框中添加了文本。但是第二行看起来不像上面的原型。我不知道如何实现这一目标。有什么想法吗？

这是我的代码：

HTML

/* Styles the header text "Hello, World!" putting it in a black box. */
   
.box {
   width: 50rem;
   margin: 0.2rem auto;
   font-family: 'Inter', sans-serif;
   font-weight: normal;
 }

 h1 {
   color: white;
   font-size: 2.5rem;
   line-height: 3rem; /* reduce size to remove gap between text */
   margin: 0px;
 }

 h1 span {
   background-color: #2d2d2d;
   padding-bottom: 0.8rem;
   padding-left: 1.2rem;
   padding-right: 1.2rem;
   -webkit-box-shadow: 1rem 0px 0px #2d2d2d, -1rem 0px 0px #2d2d2d;
   box-shadow: 1rem 0px 0px #2d2d2d, -1rem 0px 0px #2d2d2d;
   -webkit-box-decoration-break: clone;
   -ms-box-decoration-break: clone;
   -o-box-decoration-break: clone;
   box-decoration-break: clone;
 }

<!-- Hello World Text that floats over the header picture -->
<div class="box">
  <h1>
   <span>Hello, <br> &emsp; World!</span>
  </h1>
</div>

提前致谢！

Answer 1

文本缩进可以在这里帮助您，而不是手动添加 space：

h1 {
  color: white;
  font-size: 2.5rem;
  line-height: 3rem;    
  text-indent: -30px;
  margin:0;
  margin-left: 46px;
}

h1 span {
  background-color: #2d2d2d;
  padding: 0 1.2rem 0.8rem;
  -webkit-box-decoration-break: clone;
  -ms-box-decoration-break: clone;
  -o-box-decoration-break: clone;
  box-decoration-break: clone;
}

<h1>
    <span>Hello, <br> World!</span>
  </h1>

Answer 2

您可以将单词分成不同的范围：

h1 span{
  color: white;
  font-size: 2.5rem;
  line-height: 3rem;    
  background-color: #2d2d2d;
  padding: 0 1rem;
}
.world{
  margin-left: 2rem;
}

<h1>
    <span class="hello">Hello,</span> <br>
    <span class="world">World!</span>
  </h1>

彩色框内的文本

Text within a colored box

html

css

text-alignment

text-decorations