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

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，我相信你並不是真的想要你現在的那個。

添加僞元素浮動權似乎做你想要什麼：強制字幕只有當它是在第一個新行：

的pseudoelement有演示目的的顏色，在生產中刪除

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

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>