Lined title in CSS/HTML

Question

I'm trying to make a lined title with flexbox. It works but the text in the title goes to the next line, which is not what I want - it should all stay in one line.

.hr {
  width: 100%;
  display: flex;
  align-items: center;
}

.line {
  height: 3px;
  background: red;
  display: inline-block;
  width: 100%;
}

<div class='hr'>
  <div class='title'>
    Apes are cool animals
  </div>
  <div class='line'></div>
</div>

<div class='hr'>
  <div class='title'>
    Aren't they?
  </div>
  <div class='line'></div>
</div>

JSFiddle

Expected Result: https://i.gyazo.com/3164ae24d7fd2402fa711126d04319b1.png

note that `inline-block` can be removed as it's useless – Temani Afif Apr 16 '19 at 20:59 — Temani Afif, Apr 16 '19 at 20:59

score 2 · Accepted Answer · answered Apr 16 '19 at 19:42

Add a rule to stop the text from wrapping with .title { white-space: nowrap; }:

.hr {
  width: 100%;
  display: flex;
  align-items: center;
}

.line {
  height: 3px;
  background: red;
  display: inline-block;
  width: 100%;
}

.title {
  white-space: nowrap;
}

<div class='hr'>
  <div class='title'>
    Apes are cool animals
  </div>
  <div class='line'></div>
</div>

<div class='hr'>
  <div class='title'>
    Aren't they?
  </div>
  <div class='line'></div>
</div>

score 2 · Answer 2 · answered Apr 16 '19 at 19:46

One way of doing this is by using flex: 1 instead of width: 100% in .line. This makes the line as long as it needs to be in order to cover the space left by the title.

Example:

.hr {
  width: 100%;
  display: flex;
  align-items: center;
}

.line {
  height: 3px;
  background: red;
  display: inline-block;
  flex: 1;
}

<div class='hr'>
  <div class='title'>
    Apes are cool animals
  </div>
  <div class='line'></div>
</div>

<div class='hr'>
  <div class='title'>
    Aren't they?
  </div>
  <div class='line'></div>
</div>

score 1 · Answer 3 · answered Apr 16 '19 at 19:47

You can add flex-shrink: 0 to the title (the default is flex-shrink: 1 for a flex item - see demo below:

.hr {
  width: 100%;
  display: flex;
  align-items: center;
}

.line {
  height: 3px;
  background: red;
  display: inline-block;
  width: 100%;
}

.title {
  flex-shrink: 0; /* added */
}

<div class='hr'>
  <div class='title'>
    Apes are cool animals
  </div>
  <div class='line'></div>
</div>

<div class='hr'>
  <div class='title'>
    Aren't they?
  </div>
  <div class='line'></div>
</div>

Lined title in CSS/HTML

3 Answers3