CSS：在标题上包装背景颜色[重复]答案

【问题标题】：CSS: Wrap background-color on headlines [duplicate]CSS：在标题上包装背景颜色[重复]
【发布时间】：2019-12-13 20:59:15
【问题描述】：

我在 CMS 系统中有一个带有背景颜色的样式化标题。当标题在移动设备上换行时（示例宽度为 500 像素），右侧有很大的空间，并且 div 的宽度不会调整。

我怎样才能做到这一点？

.inside {
  position: relative;
  width: 1280px;
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
}

.ce_headline {
  display: flex
}

.col-12 {
  flex: 0 0 100%;
  max-width: 100%;
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

.ce_headline.angled h2 {
  clip-path: polygon(2vh 0, 100% 0, calc(100% - 2vh) 100%, 0 100%);
  padding: 10px 40px;
  -webkit-clip-path: polygon(2vh 0, 100% 0, calc(100% - 2vh) 100%, 0 100%);
}

.ce_headline h2 {
  font-family: Raleway, "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-weight: 800;
  color: #fff;
  background: green;
}

<div class="inside">
  <div class="col-12 ce_headline angled">
    <h2 class=""> That is an example headline</h2>
  </div>
</div>

【问题讨论】：

标签： html css background background-color

【解决方案1】：

祝你好运！

只需将此代码添加到您的 <style> </style> 参数中！

body{margin:0;padding:0;}
*{box-sizing: border-box;}

【讨论】：