How to add indentation when the h1 heading is split on the second line
I have a div that is 46% wide. There is an h1 tag. The h1 tag text is broken when the text is longer. but I want to use the same left padding for the second line.
I have added an image and CSS for better understanding. Is there any solution.
Here is the Html
<div class="header-tite">
<h1>An Epidemic 37 Years in the Making</h1>
</div>
Here is the CSS
.header-tite{
width:45%;
float:left;
position:absolute;
left:95px;
bottom:42px;
z-index:1;
}
.header-tite h1{
font-family: 'gotham_bookregular';
font-size:55px;
font-weight:normal;
color:#191919;
line-height:68px;
padding:0px 10px 0px 10px;
background:#FFFFFF;
display:inline;
opacity:0.85;
}
Here output
I want the same gap in front of Y.
source to share
Do not use display: inline
for block elements if you need to archive it. If you really need to, you may need to use a span tag inside the tag h1
to separate additional text separately. I would not suggest that you split this space, especially if you plan on this text to be dynamic, but if this text is under your full control you can use the tag span
for additional styling, take a look here http://jsfiddle.net/Wandile/ 5wy9o5zs / 2 / hope this helps.
source to share