DIV 글자가 많을 경우 밀리지 않고 뒤쪽이 보이지 않게 처리 하는 방법
글자가 많을 경우 밀리지 않고 뒤쪽이 보이지 않게 처리하려면 텍스트가 넘치는 부분을 숨기는 CSS 속성인 overflow를 사용할 수 있습니다.
여기에 text-overflow 속성을 추가하여 넘치는 텍스트를 어떻게 처리할지 결정할 수 있으며 white-space 속성을 사용하여 텍스트가 한 줄에 표시되도록 설정할 수 있습니다.
width 속성을 설정하여 <div>의 너비를 제한하는 것도 중요합니다. 이를 통해 텍스트가 넘치는 부분을 '...' (ellipsis)로 표시하도록 설정할 수 있습니다.
아래의 코드 예시는 이러한 속성들을 사용하여 긴 텍스트가 넘칠 경우 '...'으로 표시하는 방법을 보여줍니다.
<div style="width: 550px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #666666;">
글자가 많을 경우 밀리지 않고 뒤쪽이 보이지 않게 처리하려면 텍스트가 넘치는 부분을 숨기는
</div>
이 설정을 통해 다음과 같은 동작을 기대할 수 있습니다:
- width: 550px;은 <div>의 너비를 550픽셀로 제한합니다.
- overflow: hidden;은 넘치는 내용을 숨깁니다.
- text-overflow: ellipsis;는 넘치는 텍스트를 '...'로 표시합니다.
- white-space: nowrap;은 전체 텍스트를 한 줄로 표시하도록 강제합니다.
위는 한줄짜리..
여러줄일 경우는 아래 처럼
세로 방향으로 텍스트를 제한하여 3줄까지만 보이게 하고 그 이후의 텍스트를 숨기고 싶다면
아래는 세로 방향으로 텍스트를 3줄까지만 보여주고 그 이상의 텍스트를 숨기는 예
<div style="display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; width: 550px; color: #666666;">
세로 방향으로 텍스트를 제한하여 3줄까지만 보이게 하고 그 이후의 텍스트를 숨기고 싶다면
세로 방향으로 텍스트를 제한하여 3줄까지만 보이게 하고 그 이후의 텍스트를 숨기고 싶다면
세로 방향으로 텍스트를 제한하여 3줄까지만 보이게 하고 그 이후의 텍스트를 숨기고 싶다면
세로 방향으로 텍스트를 제한하여 3줄까지만 보이게 하고 그 이후의 텍스트를 숨기고 싶다면
</div>
- display: -webkit-box;: CSS 플렉스 박스 레이아웃을 사용합니다. -webkit-box는 오래된 Webkit 플렉스 박스 구현을 사용합니다.
- -webkit-line-clamp: 3;: 텍스트가 3줄을 초과할 경우 초과하는 부분을 잘라내고 "..."로 대체합니다.
- -webkit-box-orient: vertical;: 박스의 자식 요소들이 수직 방향으로 정렬되게 합니다.
- overflow: hidden;: 초과하는 컨텐츠를 숨깁니다.
이 방법을 사용하면 지정된 영역을 넘어서는 텍스트를 우아하게 처리할 수 있으며 사용자에게 깔끔한 인터페이스를 제공할 수 있습니다.
