[英]Inline Header With Background-Color & Padding
I'm trying to determine if there is a way to style inline headers that span multiple lines using a background color. 我正在尝试确定是否可以使用背景颜色设置跨多行的内联标题的样式。
The issue I'm having is with the padding
is broken on any lines that wrap. 我遇到的问题是padding
任何行都被padding
掉了。
Example 例
CSS and HTML CSS和HTML
h1 { display: inline; padding: 20px; background: purple; font-family: sans-serif; color: #fff; line-height: 60px; }
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel scelerisque neque.</h1>
Here is the link to my fiddle 这是我的小提琴的链接
Any help would be appreciated 任何帮助,将不胜感激
After looking at the image
you posted this is the solution I came up with: 在查看您发布的image
后,这是我想出的解决方案:
CSS and HTML CSS和HTML
.header-container{ position: relative; background: purple; overflow: hidden; padding: 20px; } h1 { display: inline; font-family: sans-serif; color: #fff; line-height: 60px; } h1:after{ content: ''; width: 100%; background-color: #fff; /*your page bg color*/ height: 50px; position: absolute; bottom: 0; margin-left: 20px; }
<div class="header-container"> <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel scelerisque neque.</h1> </div>
Why not wrap it in a container
with padding? 为什么不将其包装在带有填料的container
? And then remove padding and line height from the h1
. 然后从h1
删除填充和行高。
CSS and HTML CSS和HTML
div { padding:20px; } h1 { display: inline; background: purple; font-family: sans-serif; color: #fff; }
<div> <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel scelerisque neque</h1> </div>
Here is a working example: http://jsfiddle.net/hMMxM/5/ 这是一个工作示例: http : //jsfiddle.net/hMMxM/5/
try 尝试
http://jsfiddle.net/hMMxM/10/ http://jsfiddle.net/hMMxM/10/
$("h1").each(function()
{
var headerContent = $(this).text().split(' ');
for (var i = 1; i < headerContent.length; i++)
{
headerContent[i] = '<span class="subhead">' + headerContent[i] + '</span>';
}
$(this).html(headerContent.join(' '));
}
);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.