css - 即使可以放在一行中，如何在新行中显示文本？

Question

我正在尝试实现这样的布局:

所以副标题总是至少在第二行，即使它可以放在标题旁边的第一行。如果标题很长并且分成两行或更多行，则副标题应跟在标题后面，不要换行。

这是我目前所做的，但这个解决方案并不完美:

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>

抱歉问题的标题，这是我能想到的最好的。

Answer 1

我已经简化了你的 HTML，我相信你真的不想要你现在的那个。

添加一个向右浮动的伪元素似乎可以满足您的要求:仅当副标题位于第一行时才将其强制换行:

伪元素有一个用于演示目的的颜色，在生产中将其移除

.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>