![ribbon]( "ribbon")
我正在尝试使标题的样式类似于徽标，如下所示：因此，我为标题添加了一些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” 最佳答案 由于如果没有嵌套元素就无法完成此操作，请考虑遍历页面中包含的标题element2的每个实例的looping1，并将每个文本node3包裹一个可以作为选择器目标的元素。在指定元素中包装文本节点这可以使用jQuery .each()方法完成将类应用于这些元素以实现动态可调用性（例如：.ribbon）这可以使用for循环并组合/加入来完成 包装在指定元素中的文本节点在这种情况下，指定的元素是inline范围声明样式样式需要进行调整，以将大多数设计属性声明给嵌套的span元素。还应重新考虑伪元素上的line-height和border-width属性，以确保在不同的视口大小中保持一致（使用<length>单位可以优先选择absolute px值，而使用单位）.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>关于jquery - 标题上的功能区具有动态高度+固定换行符，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47856675/ 10-11 01:10