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的差异，这会导致可见步骤。如何确保色带始终与标题的高度相同 - 独立于标题字体，字体大小和行高？
当视口不够宽并且文本被包裹时，尾随的色带会被标题覆盖。我可以做些什么来实现徽标中的每个行都有自己的背景，在文本和第一行和最后一行的左边和右边有一些填充？最终结果应该类似于下图中“2”的第二张图像

Answer 1

由于在没有嵌套元素的情况下无法实现，因此请考虑通过标题元素^{2 1} >包含在页面中，并使用可以作为选择器^{4 3} >。

在指定元素中包装文本节点

这可以使用jQuery .each()方法
将类应用于这些元素以实现动态可扩展性（例如： .ribbon）
这可以使用for循环和组合/加入来完成包含在指定元素中的文本节点
在这种情况下，指定的元素是inline span

声明样式

样式需要调整，以将大多数设计属性声明为嵌套的span元素。

伪元素

line-height和border-width属性，以便在不同的视口大小内保持一致性（可以优先考虑absolute <length>值，使用px单位而不是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>

Answer 2

我看到解决问题的唯一解决方案是将线条放入跨度。这样，您可以控制中断，并且当宽度下降时，它们将被放入单独的行中。这是工作片段。

span元素上的

::after和::before只是为了美学，所以这条线看起来并没有被切断＆＃34;。

＆＃13;

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;
   
}

＆＃13;

<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>

＆＃13;

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

2 个答案: