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

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

由于在没有嵌套元素的情况下无法实现这一点，因此请考虑循环1遍历页面中包含的title element2的每个实例，并将每个文本node3包含一个可以作为selector4的元素。

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

这可以使用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

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

跨度元素上的::after和::before只有美学，所以线条看起来并不“切断”。

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>

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

问题描述投票：0回答：2

2个回答

最新问题

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

问题描述 投票：0回答：2

2个回答

最新问题

问题描述投票：0回答：2