Display inline-block on title tag

Question

So i would like to add a border to a h3 tag.
This border needs to span the width of the longest part of the visible text and no futher.
Currently this border seems to span the entire width of the wrapping div.

Seems weird to me that adding display inline block to a h tag doesn't provide me with the results I was after.

div {
  max-width: 180px;
}
h3 {
  display: inline-block;
  border-bottom: 2px solid green;
}

<div>
  <h3>Lorem Ipsum Dolar.....</h3>
</div>

EDIT: Seems that some of you don't get that the max-width is required.

This is how it sould line up.

Hmmm... Seems that a perfect solution isn't possible with CSS. But I've used @Muhammad Usman example and added bottom: -120%;and replaced the height and background with border properties. which works for 2 lines of text.

div {
  max-width: 200px;
  border: dashed 1px grey;
}
h3 {
  display: inline;
  font-size: 1.6em;
  position: relative;
}
h3::after {
  border-bottom: 4px solid green;
  bottom: -120%;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
}

<div>
  <h3>Lorem Ipsum Dolar</h3>
  <p>Lorem ipsum dolar set ammet Lorem ipsum dolar set ammet Lorem ipsum dolar set ammet Lorem ipsum dolar set ammet Lorem ipsum dolar set ammet</p>
</div>

So, if I understand, `max-width` is required and you want your border to be as long as the longest line in the title. And I guess this length is unknown, right? — Jordi Nebot, Jun 20 '16 at 11:06
This is probably not possible with CSS in any dynamic form. That's not the way the line-box model works. - Related- http://stackoverflow.com/questions/34995740/css-when-inline-block-elements-line-break-parent-wrapper-does-not-fit-new-width — Paulie_D, Jun 20 '16 at 11:35
As I mentioned above...this is not possible. The inline-block heading is not shrink-wrapping how you think it is. The linked Q& A applies here. — Paulie_D, Jun 20 '16 at 11:51

score 0 · Answer 1 · answered Jun 20 '16 at 10:58

0

Just erase the max-width and only use display: inline-block

div {
  }
h3 {
  display: inline-block;
  border-bottom: 2px solid green;
  }

<div>
<h3>Lorem Ipsum Dolar.....</h3>
 </div>

answered Jun 20 '16 at 10:58

Johannes

64,305
18
73
130

This doesn't answer my question. – Aaron Jun 20 '16 at 11:02
@TeutaKoraqi So you think I've added a max-width to the wrapping div for fun? – Aaron Jun 20 '16 at 11:09
2

There is no direct question. "This border needs to span the width of the longest part of the visible text" is what comes closest to a question and I gave you a solution for that. – Johannes Jun 20 '16 at 11:11
if the max-width 180px is mandatory, you already have the answer in the question - ? – Johannes Jun 20 '16 at 11:13
I don't that border stretches the full width of the containing div not the text. As per my question. – Aaron Jun 20 '16 at 11:14

score 0 · Answer 2 · answered Jun 20 '16 at 11:14

0

Is that what you want?

div {
  max-width: 180px;
  width:111px;
}
h3 {
  display: inline-block;
  border-bottom: 2px solid green;
}

<div>
  <h3>Lorem Ipsum Dolar.....</h3>
</div>

answered Jun 20 '16 at 11:14

Sagar Kodte

3,723
4
23
52

Then line is stretching the width of the wrapping div. Not the longest part of the text. – Aaron Jun 20 '16 at 11:16
You don't understand the problem. – dfsq Jun 20 '16 at 11:16
sorry not understood. You want that border til dolar... ? – Sagar Kodte Jun 20 '16 at 11:18
@dfsq may be..can you please explain? – Sagar Kodte Jun 20 '16 at 11:19
1

You can't just hardcode `width:111px;` this should be automatic, because it changes depending on the text. – dfsq Jun 20 '16 at 11:19

score 0 · Answer 3 · answered Jun 20 '16 at 11:16

0

Add Display:inline property for your "div"

 div {
        max-width: 180px;
        display: inline;
    }

answered Jun 20 '16 at 11:16

Balaganapathy NT

47
1
6

score 0 · Answer 4 · answered Jun 20 '16 at 11:22

div {
  max-width: 180px;
}

h3 {
  position: relative;
  display: inline;
}


h3:before {
  position: absolute;
  background: green;
  content: '';
  height: 2px;
  left: 0;
  right: 0;
  bottom: -4px;
}

<div>
  <h3>Lorem Ipsum Dolar Lorem Ipsum Dolar gnhhjkui abc .....</h3>
</div>

score 0 · Accepted Answer · answered Sep 05 '16 at 15:03

So I thought I would update this question as no one else has found the answer.

It is possible when using flexbox, just wrap the title tag with a div and apply flex to it.

div {
  max-width: 200px;
  border: dashed 1px grey;
}
div.flex {
  display: flex;
  flex-flow:row wrap;
  }
h3 {
  display: inline;
  font-size: 1.6em;
  border-bottom: 4px solid green;
}

<div class="flex">
<h3>Lorem Ipsum <br>Dolar</h3>
  <p>Lorem ipsum dolar set ammet Lorem ipsum dolar set ammet Lorem ipsum dolar set ammet Lorem ipsum dolar set ammet Lorem ipsum dolar set ammet</p>
</div>

Display inline-block on title tag

5 Answers5