최대 3 줄의 텍스트 필드 표시

Question

목표 : 정의 된 너비의 <div>에 긴 텍스트 필드를 최대 3 줄까지 표시하고 싶습니다.

현재 결함이 접근 :

<style> 
    div{ 
    width:50%; 
    height:100px; 
    padding:10px; 
    white-space:normal; 
    overflow:hidden; 
    text-overflow:ellipsis; 
    -o-text-overflow:ellipsis; 
    } 
</style> 


<div> 
    <%= @company.description %> 
</div> 

문제 :이 완벽하게 임의의 100 픽셀 + 20 픽셀 높이로 줄 지어 있지 않은 경우 아래 오프라인 위의 컷. 그래서, 나는 종종 텍스트 줄이 중간에 가로로 자르도록 끝납니다. 대신 어떻게 잘라 내기 대신 전체 줄을 최대 3 개까지 까지 표시 할 수 있습니까?

Answer 1

height의 경우 px이 아닌 em을 사용하십시오. 따라서 3em 또는 3.12em과 같은 것이므로 올바르게 표시 할 수 있습니다 (패딩도 고려해야 함).