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

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，我相信你并不是真的想要你现在的HTML。

添加一个向右浮动的伪元素似乎可以做你想要的事情：只有当字幕在第一行时强制使用字幕：

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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>