个人中心
gpt4 book ai didi

html - 具有环绕背景色的多行

转载 作者：行者123 更新时间：2023-11-28 01:06:19 25 4
gpt4 key购买 nike

我有几个不同的 span 都包含在一个 div 中，我正在尝试添加背景颜色以靠近文本而不是 span 周围的 block (矩形)。所以，我正在使用 inline，但这会将所有跨度放在同一行上。我怎样才能得到这种背景效果，但在跨度之间放置换行符。请注意，我无法更改 HTML，但我可以完全控制 CSS。

body {
  background-color: red;
  color: #fff
}

#page {
  width: 800px;
}

.header-content {
  width: 500px;
}

h1.module_header,
.fullwidth_header_subhead,
.header_content_wrapper {
  display: inline;
  background: #292d31;
  box-shadow: 10px 0 0 #292d31, -10px 0 0 #292d31;
}
<body>
  <div id="page">
    <div class="header-content">
      <h1 class="module_header">
        This is the really long main title that can be many lines
      </h1>
      <span class="fullwidth_header_subhead">
            Here is a subhead that can also be multiple lines so this can wrap also
        </span>
      <div class="header_content_wrapper">
        <span>
                Here is a shorter line but could be multiple lines
            </span>
      </div>
    </div>
  </div>
</body>

您可以在此处查看结果:https://codepen.io/jonmrich/pen/gdjBbK

最佳答案

一个技巧是使用::after 伪元素插入换行符。您必须将 white-space 设置为 pre 以使其不会像其他空白一样折叠。 white-space: pre 的使用归功于 this answer通过 Adrift .

要在行之间添加空格，只需制作 ::after 伪元素 display:block。这将在当前行下方添加一行，其字体大小与其“之后”的元素相同。设置 font-size 属性以均衡高度。

body {
  background-color: red;
  color: #fff
}

#page {
  width: 800px;
}

.header-content {
  width: 500px;
}

h1.module_header,
.fullwidth_header_subhead,
.header_content_wrapper {
  display: inline;
  background: #292d31;
  box-shadow: 10px 0 0 #292d31, -10px 0 0 #292d31;
}

h1.module_header::after,
.fullwidth_header_subhead::after,
.header_content_wrapper::after {
  content: '\0A';
  white-space: pre;
  display: block;
  font-size: 10px;
}
<body>
  <div id="page">
    <div class="header-content">
      <h1 class="module_header">
        This is the really long main title that can be many lines
      </h1>
      <span class="fullwidth_header_subhead">
        Here is a subhead that can also be multiple lines so this can wrap also
      </span>
      <div class="header_content_wrapper">
        <span>
          Here is a shorter line but could be multiple lines
        </span>
      </div>
    </div>
  </div>
</body>

关于html - 具有环绕背景色的多行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52340936/

25 4 0
文章推荐： javascript - onmouseover 覆盖了 :hover in CSS
文章推荐： javascript - 如何将事件处理程序分配给多个元素 (colorPicker)
文章推荐： javascript - 我如何将从 Firebase 检索的新对象数据转换为 JSON 形式，就像以前一样
文章推荐： c++ - 2个不同的类如何指向同一个数据表名称
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com