프로필사진
  • 글쓰기
  • 관리
  • 태그
  • 방명록
  • RSS

취 준 하 자

총 방문자수

오늘

어제

  • 전체 (162)
    • Project (8)
      • 검색 솔루션 개발 (1)
      • 실시간 채팅 서비스 개발 (3)
      • 지도 서비스 개발 (2)
      • 블로그 테마 만들기 (2)
    • Frontend (33)
      • CSS (8)
      • React (14)
      • Next.js (4)
      • Flutter (1)
      • Svelte (1)
      • 웹 접근성 (1)
      • 테스트 (0)
    • Backend (22)
      • Spring (5)
      • Database (6)
      • Tomcat (1)
      • Docker (1)
      • Node.js (4)
      • Ubuntu&Linux (4)
      • Firebase (1)
    • App (1)
      • Android (1)
    • Algorithm (3)
      • BOJ (0)
      • Programmers (2)
      • 이론 (1)
    • Language (37)
      • Javascript (26)
      • Python (1)
      • Java (10)
    • Computer Science (7)
      • Network (7)
    • 기타 (51)
      • npm (1)
      • Git (3)
      • VSCode (1)
      • 일상 (6)
      • 자격증 (1)
      • 부스트캠프(챌린지) (21)
      • 부스트캠프(멤버십) (17)

Tag

app router, text fragments, 이미지 fallback, toSpliced, 경로 가로채기, performance api, findLast, node.js 23, 카카오 인앱 브라우저, 병렬 경로, JavaScript, toReversed, toSorted, findLastIndex, object.groupby, 뒤로가기 새로고침 구분, intl.numberformat, speculation rules api, intl.datetimeformat, map.groupby,

최근글과 인기글

  • 최근글
  • 인기글

최근댓글

공지사항

이 기술 블로그를 만들기 위해 5년을 미뤘다.

CSS ellipsis 1

CSS - ellipsis(..., 말 줄임표) 처리

이건 쓸 때마다 까먹어서 정리를 해놔야겠다.. ㅜㅜ CSS를 이용하여 아래 사진처럼 ... 말 줄임 처리를 할 수 있다. 한 줄 elipsis 처리 .elipsis { display: block; /* 이미 display: block인 요소에 적용할 경우 생략 가능 */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 여러 줄 elipsis 처리 .elipsis { height: 20px; /* 높이를 꼭 지정해야 함 */ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; /* 여기에 제한하고자 하는 줄 수를 입력한다. */ -w..

Frontend/CSS 2021.08.19
이전
1
다음
더보기

Copyright © Kakao Corp. All rights reserved.

  • Github

티스토리툴바