오늘의 CODE

  • 홈
  • 태그
  • 방명록

flex with text-overflow 1

flex with text-overflow: ellipsis

flex containr 안에 두개의 flex-item 이 존재할 때, 1번 아이템에 내부 컨텐츠(텍스트)가 길어질 경우, 2번은 줄어들지 않고 1번에서만 '...' 표기되게 하려고 한다. 무슨 이유에선지 다른데에서 아무문제 없이 사용되던 코드가 flex-container의 넓이가 충분함에도 불구하고 첫번째 아이템이 ... 처리되었다. 적용한 css는 아래와 같다. .flex-container { display: flex; } .flex-item1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .flex-item2 { flex-shrik: 0; } 크롬에서는 원하는 대로 적용이되는데 유독 safari에서는 위의 첨부한 이미지처럼 ..

프론트엔드/css 2021.12.08
1
더보기
프로필사진

오늘의 CODE를 내일로 미루지 말자!!

  • 전체 (155)
    • 개발 환경 & 셋업 (8)
      • Setting Guide (8)
    • 프론트엔드 (97)
      • HTML (2)
      • css (40)
      • javascript (31)
      • React (9)
      • Vue.js (15)
    • 블록체인 & Web3 (7)
      • Block chain (4)
      • web3.js (3)
    • 에러 노트 (3)
      • 내가 만난 에러들 (3)
    • 이론 & 자료 정리 (20)
      • 개념 노트 (14)
      • 번역 아카이브 (6)
    • TIL & Practice (19)
      • Coding Practice (19)

Tag

css, spread operator, JSON, 알고리즘, authoptions, 백엔드 도전기, 접두사 검색, javascript example, 비동기처리, 지지않아, 중복접두사, 프로그래머스, Nuxt.js, Blockchain, package.json, 콜백지옥, 카다인 알고리즘, javascript, Regex, docker 로컬 설치,

최근글과 인기글

  • 최근글
  • 인기글

최근댓글

공지사항

페이스북 트위터 플러그인

  • Facebook
  • Twitter

Archives

Calendar

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

방문자수Total

  • Today :
  • Yesterday :

Copyright © Kakao Corp. All rights reserved.

티스토리툴바