Need to adjust line with heading text

Question

i am having issue with line with heading when goes to multi line. It will bigger than text visible area.

How can i achieve like this?

.heading-bordered {
  font-size: 32px;
  margin: 20px;
  width: 350px;
  text-align: center;
  position: relative;
}

.heading-bordered span {
  display: inline-block;
  position: relative;
  padding-bottom: 10px;
}

.heading-bordered span:before{
  height: 2px;
  background: #333;
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
}

<div class="heading-bordered">
  <span>This is so long heading and so long....</span>
</div>

What you want to achieve, can you explain it a bit more clear.? — Jithin Raj P R, Feb 28 '18 at 07:12
if you want to do it then go with `text-align:justify` instead of `text-align:center`. that is the only solution for your desired output. — Suresh Ponnukalai, Feb 28 '18 at 07:39
the short answer is you cannot ... check the dups for the explanation, you may think they have nothing to do with your question but not .. yout issue is the width or inline-block element — Temani Afif, Feb 28 '18 at 08:00

score -2 · Answer 1 · answered Feb 28 '18 at 07:05

-2

Try this

.heading-bordered span:before {
    height: 2px;
    background: #333;
    content: '';
    position: absolute;
    left: 25px;
    right: 25px;
    top: 100%;
}

answered Feb 28 '18 at 07:05

Saravana

3,389
4
21
37

no no text can be more or less. We can't set statically like this – Ram kumar Feb 28 '18 at 07:06
I tried with more text the line is equal follow the above code – Saravana Feb 28 '18 at 07:09
try with less content – Suresh Ponnukalai Feb 28 '18 at 07:15

Need to adjust line with heading text

1 Answers1