要素の高さを2行に保つ方法は？

Question

私は要素はテキストのみの2行を持っているしたい場合、それは次のように行うことができます知っている：

<span style="overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:2;display:-webkit-box;-webkit-box-orient:vertical;"><b>Long title! Long title! Long title! Long title! Long title! Long title! Long title! Long title! Long title! Long title! Long title! Long title! Long title! Long title! Long title! Long title! Long title! </b></span> 
 
<span>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/></span>

が、テキストが短い場合、それが唯一の1つのラインを持っているでしょう。私が欲しい今

<span style="overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:2;display:-webkit-box;-webkit-box-orient:vertical;"><b>Short title! </b></span> 
 
    <span>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/></span>

<span style="overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:2;display:-webkit-box;-webkit-box-orient:vertical;"><b>Short title! </b></span><br/> 
 
<span>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/></span>

と私は応答性の方法でそれをやってみたい、すなわち：かかわらずの長さの要素も、それだけで、実際に1行、このように見えるがある2行の高さを持っているでしょうタイトルの場合、<スパン>は常に2行のテキストの高さになります（高さはフォントサイズのみに依存しますが、修正されたpxでは決まりません）。これはCSSで行うことができますか？

Answer 1

pxの代わりにemサイズを使用する必要があります。

ここに例があります：https://jsfiddle.net/x2t559ar/