반응형
Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
Tags
- 객체지향
- hackerrank
- CPU
- 오버라이딩
- 오블완
- 리눅스
- 멀티프로세싱
- spring security 설정
- java
- 붕대 감기 자바
- 붕대 감기
- 입출력
- spring security
- 자바의정석
- 혼공얄코
- continue 사용법
- 쿠키
- 멀티태스킹
- 오버로딩
- 자바의 정석
- contiune
- 중첩 break
- 티스토리챌린지
- over()
- 다형성
- SQL Mapper
- 프로그래머스 붕대 감기
- 프로그래머스
- 캡슐화
- break 사용법
Archives
- Today
- Total
쉽게 쉽게
[HTML/CSS] 글자수 넘어가면 말줄임표 본문
반응형
▤ 목차
1. CSS로 구현
1. css로 구현
<style>
.text_area {
width:50px;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
/* white-space: nowrap; */
</style>
text-overflow을 사용하기 위한 조건
text-overflow 속성은 블록 형태인 경우에만 적용된다.
width 또는 height가 고정적이어야 한다.
overflow: hidden; 을 사용해 영역을 감춰야 한다.
아래줄로 내려가는 것을 막기 위해 white-space: nowrap 등이 필요하다.
text-overflow 적용을 하려면 가로넓이가 있어야 하기 때문에 width를 적용해 줬다.
한 줄일 때 말 줄이기를 하고 싶으면 white-space: nowrap이 적용이 되어야 한다.
아래는 nowrap 적용 시 표현되는 예시다.
해당 속성이 없으면 자동으로 글자가 다음줄로 넘어가기 때문에 이러한 상황을 방지해야 한다.
2줄 이상일 경우 white-space 속성은 필요없다.
- overflow: hidden; : 가로 50px이 넘으면 내용 안 보이기
- text-overflow: ellipsis; : 가로 50px이 넘으면 말줌임표(...) 표시
- -webkit-line-clamp: 2; : 영역 내의 컨텐츠의 최대 라인 수를 결정 (2줄까지는 나옴)
- -webkit-box-orient: vertical; : 영역 박스 내의 정렬 결정 (가로정렬)
- withe-space : nowrap : 자동으로 줄바꿈 시키지 않는다.
2. Javascript로 구현
1. js로 구현
let length = 10; // 표시할 글자수 기준
let str = '자바스크립트로말줄임표구현하기';
if (str.length > length) {
str = str.substr(0, length - 2) + '...';
}
https://develop-obm.tistory.com/28
잘못된 내용이 있다면 지적부탁드립니다. 방문해주셔서 감사합니다. |
반응형
'개발공부 > HTML' 카테고리의 다른 글
[HTML] video 태그 (0) | 2024.04.04 |
---|---|
[JSTL] JSTL 동적 변수 (0) | 2023.10.16 |
[HTML] <button> 특징 (0) | 2023.07.18 |