1行に収まる場合でも新しい行にテキストを表示する方法は？私はこのようなレイアウトをachiveしようとしている

Question

：

をので、字幕は、それが次のタイトルの最初の行に合うことができる場合でも、少なくとも2行目に常にあります。タイトルが長く、複数の行に分割されている場合は、改行を解除せずにタイトルに従う必要があります。

これは私が今までにやったことですが、このソリューションは完璧ではありません。

質問のタイトルについては申し訳ありません

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>

、私が思い付くことが最高のthats。

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>