고정 높이 컨테이너에서 텍스트 오버 플로우를 처리하는 방법

Question

고정 된 높이 레이아웃에서 동적 텍스트로 텍스트 오버 플로우를 처리하는 방법이 있습니까?

내가 종종 백엔드 개발자를 위해 sitebuild해야 할 때, 디자인이 그것을 허용하지 않기 때문에 overflow: auto CSS 속성을 사용할 수없는 고정 높이 컨테이너/레이어 (카드 또는 Thubnail처럼)가 있음을 종종 봅니다. .

ellipsis을 사용한다고 가정하겠습니다. 텍스트는 2 줄 길이가 될 수 있습니다. :after 또는 :before 의사를 사용할 수 있지만 내가 만든 도트가 텍스트 위에 오버플로되거나 컨테이너 밖으로 밀려나는 경우 어떻게해야합니까? 자바를 사용하고 문자 수를 최대화하면 세계를 이렇게 깨뜨리는 것보다 Hello worl...이됩니다. 그래, 우리는 각 필드의 백엔드 측면에서 문자를 최대화 할 수 있지만 때로는 작은 장치 (Tablet, 모바일)에서 제대로 작동하지 않을 수도 있습니다.

나는 좋은 생각으로 말하지 않았다면 여기에 jsfiddle입니다. 내가 생각하고있는 것입니다.

제 질문은이 문제를 해결하는 가장 좋은 방법은 무엇입니까?

Answer 1

당신은 라인 클램프에게 더 많은 도움이 URL에

.line-clamp { 
    display: -webkit-box; 
    -webkit-line-clamp: 3; 
    -webkit-box-orient: vertical; 
} 

살펴보십시오 않았다 Line Clampin’ (Truncating Multiple Line Text)