웹 개발에서 긴 텍스트를 다룰 때, 특히 첫 번째 줄이 너무 길어 두 번째 줄로 넘어가는 경우가 종종 있습니다. 이럴 때 두 번째 줄부터 말줄임 표시를 적용하고 싶다면 CSS만으로는 해결하기 어렵습니다. 대신, JavaScript를 활용하여 조건에 따라 스타일을 조정하는 방법이 있습니다. 이 글에서는 간단한 예시를 통해 이를 구현하는 방법을 설명하겠습니다.HTML 구조먼저, 텍스트를 담을 HTML 구조를 만듭니다. 아래와 같이 text-container와 text 클래스를 가진 두 개의 div 요소를 사용합니다. 여기에 너무 긴 텍스트가 들어갑니다. 이 텍스트가 너무 길어서 두 번째 줄로 넘어가면, 두 번째 줄부터 말줄임 처리가 되어야 합니다.CSS 스타일다음으로, CSS를 사용하여 텍스트 컨테이너..

제목을 한 줄로 표현 제목이나 글의 내용을 보여줄 때 내용이 영역보다 길어서 자동으로 줄 바꿈이 되거나 UI가 깨지지 않도록 하기 위해 말 줄임 효과를 사용할 수 있습니다. 말 줄임 css코드 말 줄임 기능을 구현하기 위한 CSS 코드는 다음과 같습니다. ul > li > a > .title { width: 100%; /* 영역사이즈 */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 이 코드는 텍스트가 요소를 넘어가는 경우 텍스트를 자르고 생략 부호(...)로 표시합니다. 참고사항 width경우 지정하지 않아도 된다면 코드에서 제외해도 괜찮습니다.