How to display text in a new line, even if it can fit on one line?

Question

I am trying to execute a layout like this:

So, subtitles are always at least in the second line, even if they can fit in the first line next to the title. If the title is long and split into two or more lines, the subtitles should follow the title without breaking a new line.

This is what I have done 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>

Run codeHide result

Sorry for the title of the question, this is the best I could come up with.

Answer 1

I simplified your HTML, I believe that you really do not want your current.

-, , , , : , :

,

.data {
  display: inline-block;
  background-color: antiquewhite;
  max-width: 150px;
  margin: 10px;
}

.title {
  color: blue;
}

.subtitle {
  color: gray;
}

.title:before {
  content: " ";
  float: right;
  width: 150px;
  height: 1px;
  background-color: green;
}

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

Hide result

Answer 2

, CSS , . jQuery. - , , .

, .data, CSS , . , , .

$(document).ready(function() {

  // iterate through .data elements
  $('.data').each(function() {

    // store width of currently iterated element
    var startTextWidth = $(this).width();

    // clone currently iterated element
    var clone = $(this).clone();

    // apply CSS to cloned element to prevent text wrapping.
    clone.css({
        position: "absolute",
        left: "-10000px",
        maxWidth: "none"
    }).appendTo("body");

    // get the width of the cloned element with the newly applied CSS
    textWidth = clone.width();
    
    // if cloned elements width is larger than the existing elements width then the text has wrapped
    if(textWidth > startTextWidth) {
      // apply display:inline to the .title element
      $(this).find('.title').css('display', 'inline');
    }
    
    // remove cloned element
    clone.remove();
  });
});

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;
}
.subtitle {
  color:grey;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="data">
  <div class="title">title</div>
  <span class="subtitle">subtitle</span>
</div>
<div class="data">
  <div class="title">reaallllyyyy loooooong title</div>
  <span class="subtitle">subtitle</span>
</div>

Hide result