How to display text in a new line even if it could fit in a single line?

user_517840 0
Viewed 140

I'm trying to achive a layout like this:

enter image description here

So the subtitle is always at least in the second line, even if it could fit in the first line next to the title. If the title is long and break into two or more lines, the subtitle should follow the title without breaking a new line.

This is what i did so far, but this solution is not perfect: 

div.data {
  background:white;
  position:relative;
  min-height: 2em;
  float:left;
  max-width:150px;
  margin: 50px;
}

.title {
  position:relative;
  overflow:hidden;
  background: white;
  z-index: 10;
}

.title span {
  position:relative;
}

.title span span {
  position:absolute;
  right:0px;
  opacity:1;
  top: 18px;
  display: block;
  transform: translateX(100%);
  padding-left: 5px;
  color: red;
}

span.subtitle {
  position:absolute;
  bottom:0;
  left:0;
  z-index: 5;
  display:block;
  color: red;
}
<div class="data">
  <div class="title"><span>title  <span>subtitle</span></span></div>
  <span class="subtitle">subtitle</span>
</div>


<div class="data">
  <div class="title"><span>reaallllyyyy loooooong title  <span>subtitle</span></span></div>
  <span class="subtitle">subtitle</span>
</div>

Sorry about the question's title, thats the best i could come up with.

word-wrap css
2 Answers
Related