콘요맘떼 개발일지

  • 홈
  • 태그
  • 방명록

css ellipsis 1

[css, Scss] 텍스트 n줄까지만 출력하게 하기

css를 활용해서 특정 element가 텍스트를 n줄까지만 보여주고 그 이상은 ellipsis(...) 처리하고 싶다면 아래와 같이 코드를 작성해주면 된다. 예시에서는 2줄을 기준으로 설정하였으며 빨간색으로 밑줄 친 부분에 n줄에 해당하는 값을 넣어주면 된다. 참고로 line-height를 지정해준 것은 텍스트가 2줄 이상인 경우 잘림 현상이 발생하는 것을 방지하기 위함이다. line-height를 지정해주지 않으면 g와 같은 일부 글자가 잘림 현상이 발생하기 때문에 루트 단에서 기본적으로 line-height를 normal로 지정하는 방법이 개인적으로 좋은 것 같다. 'n줄까지만 보여준다'는 단순한 기능인데 코드가 생각보다 길다. 만약 scss를 활용한다면 mixin을 만들어서 해당 기능을 보다 편리하..

프론트엔드 기본개념 복습/CSS 2022.04.14
이전
1
다음
더보기
프로필사진

콘요맘떼 개발일지

  • 분류 전체보기 (135)
    • 모바일 이야기 (8)
    • 잡다한 교훈 (17)
    • Git 공부 (1)
    • 알고리즘, 자료구조 공부 (6)
    • CS 공부 (11)
    • 프론트엔드 테크면접 준비 (3)
    • 프론트엔드 기본개념 복습 (66)
      • HTML (5)
      • CSS (14)
      • Javascript (18)
      • React (12)
      • Webpack (0)
      • Redux (1)
      • Typescript (7)
      • 테스트코드 (5)
    • 독서 (12)
      • 클린코드 (10)
      • 이펙티브 타입스크립트 (2)
    • 프로젝트 (잡다한) (3)
    • 아키텍쳐 (2)
    • 일상 (1)

Tag

함수형 프로그래밍, @testing-library, css, 실행 컨텍스트, 멀티 스레드, React, 자바스크립트, 노개북, 노마드코더, jest, React Hook, Lazy Loading, proxy, 자료구조, react query, 리액트, 리액트 훅, JavaScript, http, 북클럽,

최근글과 인기글

  • 최근글
  • 인기글

최근댓글

공지사항

페이스북 트위터 플러그인

  • Facebook
  • Twitter

Archives

Calendar

«   2025/05   »
일 월 화 수 목 금 토
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 31

방문자수Total

  • Today :
  • Yesterday :

Copyright © Kakao Corp. All rights reserved.

티스토리툴바