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

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>