彩色框中的文本答案

【问题标题】：Text within a colored box彩色框中的文本
【发布时间】：2021-12-01 17:51:57
【问题描述】：

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

值得注意的是，我已经取得了一些成果，但问题是这里的文字不是从左到右居中的。它更像是随机对齐，我不知道如何实现。另外请记住，此文本将以放置在图片前面的方式使用。因此，它必须被创建为某种组件，以便稍后我可以轻松地重用/对齐图片。

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

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

这是我的代码：

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>

提前致谢！

【问题讨论】：

使用两个元素而不是一个？毕竟它是展示性的，而不是内容。
理想情况下，黑框元素将是 1 个元素，然后蓝框文本将是另一个元素。这些应该根据光标的位置浮动。我不想要“你好，世界！”被视为两个不同的元素，因为它在浮动时可能看起来不太好。

标签： html css text-alignment text-decorations

【解决方案1】：

Text-indent 可以在这里帮助你，而不是手动添加空格：

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>

【讨论】：

【解决方案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>

【讨论】：