Wrap the lines according to the width of first line

Question

I have a link with main title and description, and I would like to wrap the description line according to the width of the first line. Can I achieve that by using only CSS?

I have following code:

<a href="http://google.com">
  <span class="ht">Oficiální stránky</span>
  <span class="hb">Podívejte se na oficiální web festivalu</span>
</a>

https://jsfiddle.net/kybernaut/9uh24zns

Desired output:

Note: there will be more links in the line with different width of the first bold title.

Did you try this? http://stackoverflow.com/questions/3949762/how-to-wrap-text-using-css edit: I see that's not exactly what you're doing. But that is the CSS that would wrap your sub-header. — Christopher Schneider, Jun 20 '16 at 15:10
Nope, but I don't want to set the width manually. It has to be done automatically (my clients can change the menu items themselves and there are more items than one) — Karolína Vyskočilová, Jun 20 '16 at 15:13

Paulie_D · Answer 1 · 2016-06-20T15:18:28.467

Here's sneaky way of achieving this effect.

.limit {
   border: 1px solid red;
  display: table;
  width: 1%;
  
}

.ht {
  color: black;
  font-size: 24px;
  font-weight: bold;
  white-space: nowrap; /* stop text wrapping */
}

.hb {
  color: #555;
  font-size: 18px;
  display: block;
}

<a href="http://google.com" class="limit">
  <span class="ht">Oficiální stránky</span>
  <span class="hb">Podívejte se na oficiální web festivalu</span>
</a>

Stickers · Accepted Answer · 2016-06-20T15:40:07.283

2

You could try the CSS table + table-caption solution.

.container {
  display: table;
}
.hb {
  display: table-caption;
  caption-side: bottom;
}

<a class="container" href="#">
  <span class="ht">FIRST LINE</span>
  <span class="hb">second line some example content here</span>
</a>

jsFiddle

edited Jun 20 '16 at 15:40

answered Jun 20 '16 at 15:19

Stickers

75,527
23
147
186

This is a good alternative but there are some interesting effects - https://jsfiddle.net/qn0gj95n/ :) – Paulie_D Jun 20 '16 at 15:22
True, as it's caption, but it can be done with applying borders to both of them - https://jsfiddle.net/qn0gj95n/2/ – Stickers Jun 20 '16 at 15:25
Thanks, very interesting and quick solution. – Karolína Vyskočilová Jun 20 '16 at 15:49

score -1 · Answer 3 · edited May 23 '17 at 12:16

You may use

word-wrap property but None of the major browsers support the text-wrap property.

.ht {
  color: black;
  font-size: 24px;
  font-weight: bold;
  display: block;
}

.hb {
  color: #555;
  font-size: 18px
}
#wrapDiv{
  width: 190px;
  word-wrap: normal
}

<div id="wrapDiv">
  <a href="http://google.com">
  <span class="ht">Oficiální stránky</span>
  <span class="hb" >Podívejte se na oficiální web festivalu</span>
</a>
</div>

You can also refer, it's same as How to word wrap text in HTML?

Wrap the lines according to the width of first line

3 Answers3