HTML에서 텍스트가 너무 길어서 넘칠 때 잘 처리하는 방법에 대해서 알아볼게요. (여러 줄)
바로 예제를 통해 확인해보도록 하죠.
실제로 기능과 크게 상관이 없는 css 속성들은 div 태그 안에 박아둘게요. (height 수치만 잘 기억해주세요.)
<div class="box" style="width: 200px; height: 25px; background: #F78181; font-size: 20px;">
텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트
</div>
아래 사진처럼 보일거에요.
우리는 한정된 빨간 박스 안에 텍스트를 한 줄로 줄여놔야해요.
이쁘게 정리해볼게요.
overflow는 div 내에 컨텐츠가 초과되었을 때 어떻게 하겠냐는 속성이에요. hidden으로 설정해서 벗어나는 컨텐츠는 모두 숨겨버릴게요.
text-overflow는 텍스트가 넘쳤을 때 어떻게 할 거냐에 대한 속성이에요. ellipsis을 줘서 ...으로 표기할게요.
white-space는 줄바꿈을 어떻게 처리할 것인지에 대한 속성이에요. 우리는 모두 한 줄로 표기할거라 nowrap; 속성으로 지정해줍니다.
.box {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
여러 줄 형태로 생략하고 싶은 경우는 아래 글을 참고해주세요.
'Frontend > HTML5' 카테고리의 다른 글
HTML/CSS 스크롤바 숨기기 없애기 (스크롤 동작) (1) | 2019.10.17 |
---|---|
HTML/CSS div 가로 배열 3등분, 양옆으로 (flex 속성) (0) | 2019.09.26 |
HTML/CSS 이미지 둥글게 원 모양 (프로필) (1) | 2019.09.25 |
HTML/CSS 여러 줄 텍스트 넘칠 때 숨기기... 생략 (0) | 2019.09.25 |
HTML/CSS div 수직 가운데 정렬 (Vertical Align) (0) | 2019.09.25 |