带有动态高度的标题上的功能区+修复换行符

Question

我正在尝试为我的标题实现一种类似于我的徽标的样式，如下所示：

所以我为标题添加了一些 CSS 以创建一些丝带，如下所示：

body {
  text-align: center;
}
h1,
h2 {
    color: white;
    background-color: #f3a692;
    text-shadow: -1px 1px rgba(208,96,0,0.5);
    display: inline-block;
    line-height: 1.6em !important;
    padding: 0 10px !important;
    margin-bottom: 20px;
}

h1:before,
h2:before {
    border-left-color: transparent !important;
    transform: translateX(-100%);
}

h1:after,
h2:after {
    border-right-color: transparent !important;
}

h1:after,
h1:before,
h2:after,
h2:before {
    content: '';
    border-color: #f3a692;
    border-style: solid;
    border-width: 0.8em;
    position: absolute;
}

<body>
<h1>Hello World</h1>
<p>This is just a small test</p>
<h2>Okay, thats nice!</h2>
<p>Here is some more text for no particular reason.</p>
</body>

它几乎可以按我想要的方式运行，但我有一些问题无法解决。我希望你能帮助我找出我做错了什么：

根据视口宽度，某些标题有时在功能区高度和标题背景之间存在 1px 的差异，这会导致可见的台阶。如何确保功能区始终与标题高度相同 - 与标题字体 font-size 和 line-height 无关？
当视口不够宽且文本被换行时，尾部功能区会被标题覆盖。我可以做些什么来实现徽标中的外观，其中每一行都有自己的背景，并且在第一行和最后一行的文本和功能区的左右两侧有一些填充？最终结果应该类似于下图中“2”的第二个图像

Answer 1

我看到的解决您的问题的唯一方法是在 span 中放置线条。这样，您就可以控制中断，并且随着宽度的下降，它们将被放在不同的行中。这是工作片段。

span 元素上的

::after 和 ::before 只是为了美观，所以该行看起来不像 "cut off".

body {
  text-align: center;
  width:500px; /* only for demonstration purposes */
}
h1,
h2 {
    color: white;
    background-color: transparent;
    text-shadow: -1px 1px rgba(208,96,0,0.5);
    display: inline-block;
    line-height: 1.6em !important;
    padding: 0 10px !important;
    margin-bottom: 20px;
    position:relative;
}
h1 span, h2 span {
     height: 1.6em !important; 
     background-color:#f3a692; 
     display:inline-block; 
     white-space:nowrap; 
     padding:0;
     margin-bottom:20px;
     position:relative;
}
h1 span::before, h1 span::after, h2 span::before, h2 span::after {
content: ' '; 
background-color:#f3a692; 
position:absolute;
left:-10px; 
width:10px; 
height:100%;
}
h1 span::before, h2 span::before { left:-10px; }
h1 span::after, h2 span::after { left:auto; right:-10px; }
h1:before,
h2:before {
    border-left-color: transparent !important;
    transform: translateX(-100%);
}

h1:after,
h2:after {
    border-right-color: transparent !important;
}

h1:after,
h1:before,
h2:after,
h2:before {
    content: '';
    border-color: #f3a692;
    border-style: solid;
    border-width: 0.8em;
    position: absolute;
   
}

<body>
 <!-- Make sure there is no whitespace between spans and h1 -->
<h1><span>Hello World </span><span>Some random text here</span></h1>
<p>This is just a small test</p>
<h2><span>Okay, thats nice!</span></h2>
<p>Here is some more text for no particular reason.</p>
</body>

Answer 2

由于没有嵌套元素无法完成此操作，请考虑循环¹ 遍历标题元素的每个实例² 包含在一个页面中，并用一个元素包裹每个文本节点³可以定位为选择器⁴。

在指定元素中环绕文本节点

这可以使用 jQuery .each() 方法来完成
对这些元素应用类以实现动态可伸缩性（例如： .ribbon)
这可以使用 for 循环和 combining/joining 来完成包裹在指定元素中的文本节点
在这种情况下，指定的元素是一个 inline 跨度

声明样式

样式需要调整，以向嵌套的 span 元素声明大部分设计属性。

line-height 和 border-width 属性，在 pseudo-elements 上，也应该重新考虑不同视口大小的一致性（可能会给出偏好到 absolute <length> values, using px units, rather than relative <length> 个值，使用 em 个单位）

.ribbon {
    max-width: 92%; /* allow space to prevent pseudo-elements overflowing horizontally */
    word-wrap: break-word; /* allow word wrapping */
    margin: 0 auto 20px auto;
}

.ribbon span {
    color: white;
    background-color: #f3a692;
    text-shadow: -1px 1px rgba(208, 96, 0, 0.5);
    display: inline-block;
    line-height: 50px; /* adjusted */
    padding: 0 5px;
    box-sizing: border-box;
    margin-bottom: 10px; /* allow vertical spacing between sibling elements */
}

代码片段演示：

$('.ribbon').each(function(){
  var textNodes = $(this).text().split(' ');
  var output = '';
  for(var i=0; i < textNodes.length; i++) {
      output += '<span>'+textNodes[i]+'</span>';
  }
  $(this).html(output);
});

/* || start additional */

.ribbon {
    max-width: 92%; /* allow space, left & right, to prevent pseudo-elements overflowing horizontally */
    word-wrap: break-word; /* allow word wrapping */
    margin: 0 auto 20px auto;
}

.ribbon span {
    color: white;
    background-color: #f3a692;
    text-shadow: -1px 1px rgba(208, 96, 0, 0.5);
    display: inline-block;
    line-height: 50px; /* adjusted */
    padding: 0 5px;
    box-sizing: border-box;
    margin-bottom: 10px; /* allow vertical spacing between sibling elements */
}

.resize { /* for the sake of demonstration */
    resize: auto;
    display: block;
    overflow: hidden;
    height: 100%;
    border: 2px dashed gray;
    position: relative;
}

/* end additional */

body {
  text-align: center;
  box-sizing: border-box; /* additional */
}

/*h1,
h2 {
  color: white;
  background-color: #f3a692;
  text-shadow: -1px 1px rgba(208, 96, 0, 0.5);
  display: inline-block;
  line-height: 1.6em !important;
  padding: 0 10px !important;
  margin-bottom: 20px;
}*/

.ribbon:before,
.ribbon:before {
  border-left-color: transparent !important;
  transform: translateX(-100%);
}

.ribbon:after,
.ribbon:after {
  border-right-color: transparent !important;
}

.ribbon:after,
.ribbon:before,
.ribbon:after,
.ribbon:before {
  content: '';
  border-color: #f3a692;
  border-style: solid;
  border-width: 25px; /* adjusted */ /* equal to half the line height of sibling span elements */
  position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <div class="resize">
    <h1 class="ribbon">Wrapping text nodes in a specified element.</h1>
    <h1 class="ribbon">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</h1>
    <h2 class="ribbon">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</h2>
  </div>
</body>

带有动态高度的标题上的功能区+修复换行符

Ribbon on heading with dynamic height + fixing the line break

html

css

jquery

ribbon