요소의 높이를 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 줄 (글꼴 크기에만 의존하지만 높이는 수정하지 않음)과 같은 높이를 갖습니다. CSS로 수행 할 수 있습니까?

Answer 1

px 대신 em 크기를 사용해야합니다.

예 : https://jsfiddle.net/x2t559ar/