Updated 08/01/22
css 를 사용하다 보면 은근히 텍스트를 생략해야 할 때가 많다.
지난번에도 UI 작업하다가 버튼 안의 텍스트가 너무 길어 버튼 영역이 망가져 버렸다.
이럴때 너무 텍스트가 길면 ... 으로 생략되도록 css 를 사용하여 만들어보자.
CSS - 텍스트가 넘칠때 생략하기
text-overflow 라는 속성을 사용하면 된다.
overflow 속성으로 영역 안에 내용이 많아서 넘칠 때, 종종 스크롤 바를 사용했다. 오버플로우는 흘러넘치는 영역을 제한하는 속성이다.
text-overflow 속성도 비슷하다. 문장이 넘쳐흐를 때 생략할 수 있다.
text-overflow 의 조건
text-overflow 속성을 사용하려면 몇 가지 조건이 만족되어야 동작한다. 그렇지 않으면 생략 기호로 나타나지 읺을 수 있다.
i. width 또는 height가 고정적일 것
ii. overflow: hidden; 을 사용해 영역을 감출 것
iii. 아래줄로 내려가는 것을 막기위해 white-space: nowrap 등이 필요
+ 추가) 부모 요소의 display 속성이 block이여야 한다. 왜냐하면 text-overflow 속성은 블럭형태인 경우에만 적용되기 때문이다.
💡 1 줄 줄이기
다른 분의 블로그에서 참고한 예제를 먼저 살펴보자.
HTML
일단 간단한 태그를 넣어주었다.
<div>
<p>이렇게 긴 경우 생략기호가 필요한...</p>
</div>
CSS
div p {
overflow: hidden; // 을 사용해 영역을 감출 것
text-overflow: ellipsis; // 로 ... 을 만들기
white-space: nowrap; // 아래줄로 내려가는 것을 막기위해
word-break:break-all;
width: 100px;
height: 20px;
}
실행결과
이렇게 긴 경우 생략...
위의 내용을 바탕으로 실제로 적용한 예제이다.
HTML
버튼 안에 텍스트의 수가 제한되어 있어서 예쁘게 생략해달라는 디자이너님의 요청이 있었다 ~
<div>
<span class="selectbtn">궁금하신 내용을 선택해주세요.</span>
<div>
CSS
하지만 위의 예제처럼 적용이 되지 않아 한참을 헤매였다. 항상 이유를 찾다보면 몇글자가 달라서이다🥲
display 속성이 blcok 이어야 text-overflow 속성이 잘 동작한다는 것이다.
텍스트는 보통 <span> 이나 <p> 태그에 잘 쓴다. 얘네들은 inline 요소다. 그렇기 떄문에 속성 지정을 block 으로 변경해주고 나서야 비로소 잘 동작하게 되었다.
body span {
display: block; // inline-block으로 설정 필요
}
.selectbtn {
max-width: calc(100% - 38px);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
실행화면
성공적으로 생략기호가 잘 들어갔다.
💡 2 줄 줄이기
CSS
위의 내용을 두줄로 줄여보자. -webkit-box 속성을 사용해보았다.
- display: -webkit-box 속성은 해당 영역을 box 형태로 관리된다.
- -webkit-line-clamp 속성은 영역 내의 컨텐츠의 최대 라인수를 결정한다.
- -webkit-box-orient: vertical 속성은 영역 박스의 내의 정렬을 수직으로 만든다.
body span {
display: block; // inline-block으로 설정 필요
}
.card {
max-width: calc(100% - 38px);
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box; // 얘네를 추가히준다
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
결과화면
두 줄로 잘보인다 ~
'JavaScript' 카테고리의 다른 글
CSS - input 체크박스 테두리 스타일 변경하기 (0) | 2021.09.29 |
---|---|
JavaScript - split()으로 문자열 자르기 (파일명에서 확장자만 따로 분리하기) (0) | 2021.09.28 |
JavaScript 알고리즘(4) 퀵정렬(Quick Sort) (0) | 2021.08.26 |
JavaScript 알고리즘 (3) 삽입정렬 (Insertion Sort) (0) | 2021.07.22 |
JavaScript 알고리즘(2) 버블정렬(Bubble Sort) (0) | 2021.07.19 |
댓글