CSS로 텍스트의 마지막 줄만 보이게 하는 방법

문제 정의

스택오버플로우에 나온 이슈는 CSS를 사용해서 텍스트 블록의 마지막 줄만 보이게 하는 방법에 대한 것입니다. 즉, 여러 줄의 텍스트 중에서 마지막 줄만 화면에 표시되어야 합니다.

기본 해결 방법

CSS에서는 line-clamp과 overflow 속성을 함께 사용하면 텍스트의 특정 줄까지만 표시할 수 있습니다. 그러나 이 방법은 첫 번째 줄부터 시작해서 원하는 줄까지만 표시해주는 것이므로, 마지막 줄만 표시하기에는 적합하지 않습니다.

코드를 이용한 해결 방법

JavaScript를 사용하면 더 세밀한 제어가 가능합니다. 예를 들어, 텍스트 블록의 높이와 한 줄의 높이를 구한 다음, 이를 이용하여 마지막 줄만 보이게 할 수 있습니다. 이렇게 하려면 다음과 같은 코드가 필요합니다.

let textBlock = document.querySelector('.text-block');
let lineHeight = parseFloat(window.getComputedStyle(textBlock).lineHeight);
let blockHeight = textBlock.clientHeight;

textBlock.scrollTop = blockHeight - lineHeight;

위의 코드에서는 먼저 .text-block이라는 클래스를 가진 요소의 높이(clientHeight)와 한 줄의 높이(lineHeight)를 구합니다. 그런 다음 scrollTop 속성을 이용해서 텍스트 블록의 스크롤 위치를 조정합니다. 이렇게 하면 마지막 줄만 보이게 됩니다.

주의사항

이 방법은 JavaScript를 필요로 하기 때문에, 사용자가 브라우저에서 JavaScript를 비활성화한 경우 작동하지 않을 수 있습니다. 또한, 브라우저마다 동작이 약간 다를 수 있으므로 여러 브라우저에서 테스트하는 것이 좋습니다.

정리

텍스트의 마지막 줄만 보이게 하는 것은 CSS만으로는 어렵습니다. 그러나 JavaScript를 활용하면 이 문제를 해결할 수 있습니다. JavaScript 코드를 이용해 텍스트 블록과 한 줄의 높이를 구한 다음, 이 정보를 바탕으로 scrollTop 속성을 조정하면 원하는 결과를 얻을 수 있습니다.