3

I have a div which width is 46%. There is a h1 tag. The text of h1 tag is broken when text is longer. but i want to use same left padding for the second line.

I attached an image and css for better understanding. Is there any solution.

Here is 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 is output

enter image description here

I want same gap before Y.

wahid
  • 1,150
  • 1
  • 9
  • 16
  • 1
    A headline as inline element? Use ```display: block;``` and your padding problem shouldn't exist furthermore. – RWAM Aug 26 '14 at 12:19
  • I wish closing as duplicate didn't eat the comments on the question. http://stackoverflow.com/questions/12330659/same-padding-at-start-and-end-of-each-line seems to be exactly what you need, if it's not let me know. – thirtydot Aug 26 '14 at 12:27
  • Dear in that solution they use three span. But i can not use three span. I want to use only one

    tag.

     – wahid Aug 26 '14 at 12:36
  • @wahid: That's not possible. You can use an outer `h1` with `span`s inside, but you need extra elements in your HTML (unless you're willing to use JavaScript). – thirtydot Aug 26 '14 at 13:15

1 Answers1

0

Do not use display: inline on block elements if you need to archive this. If you really have to, you might need to use a span tag inside your h1 tag to style the extra text separately. I wouldn't suggest you mind the gap, especially if you plan this text to be dynamic, but if this text is in your full control then you can use the span tag for additional styling, have a look here http://jsfiddle.net/Wandile/5wy9o5zs/2/ hope this helps.

Wandile
  • 174
  • 1
  • 16
  • If i do not use display inline then how can i achieve the gap between two line. Remember here is actually not two line . Here is one line break for the width. I do not use any
    tag here     – wahid Aug 26 '14 at 12:33
  • @wahid you can use `line-height`. It works just as you would have two lines. When the text steps into the second line it is treated as a second line. http://jsfiddle.net/Wandile/5wy9o5zs/ – Wandile Aug 26 '14 at 12:38
  • please look at the image. There is a white background for the text. and a gap between two line. Using line height how can you achieve that gap. Using line height you can give gap between two line but how you can give gap between background color – wahid Aug 26 '14 at 12:42
  • Remember to play around with margin to display things where you want them to be. Here is an updated verion http://jsfiddle.net/Wandile/5wy9o5zs/1/ i made it look exactly how you want it. – Wandile Aug 26 '14 at 12:43
  • OK try this http://jsfiddle.net/Wandile/5wy9o5zs/2/ to archive this you might have to use a `span` tag inside the `h1` – Wandile Aug 26 '14 at 12:53
  • Thank you very much for your support and suggestion. – wahid Aug 26 '14 at 17:15
  • no problem, please choose an answer as questions should not be left unanswered. – Wandile Aug 27 '14 at 08:30