HTML & CSS

텍스트가 넘쳐 흘렀을 때 처리 방법

오류확인자 2024. 8. 13. 17:26

1. max-content

  • 요소의 컨텐츠가 완전하게 표시되도록 필요한 최대 크기를 의미한다. 즉, 콘텐츠가 줄바꿈 없이 전부 표시될 수 있을 만큼의 넓이를 가지게 된다.

2. min-content

  • 요소의 콘텐츠가 줄바꿈 없이 최소한으로 줄어들 수 있는 크기를 의미한다. 이때, 텍스트 같은 경우는 단어들이 줄바꿈 없이 최소 크기로 줄어든다. 하지만 줄바꿈이 필요한 경우, 줄바꿈이 발생하며 최소한의 공간을 차지하게 된다.

3. fit-content

  • 요소의 크기를 내부 콘텐츠에 맞추지만, 그 크기는 최소 크기(min-content)와 최대 크기(max-content) 사이에서 제한을 하게 된다.
  • 즉, 컨텐츠가 너무 커지지 않도록 하면서도, 가능한 한 요소가 콘텐츠를 완전히 담을 수 있게 조절된다.
  • fit-content는 max-content처럼 모든 콘텐츠가 한 줄에 표시되지 않고, 필요하면 줄바꿈을 하여 요소의 크기를 제한된 범위 내에서 유지한다.

4.white-space: nowrap

글자가 넘쳤을 때, 자르지 않고 ...으로 표시를 하려면 어떻게 해야할까?

  1.  white-space: nowrap: 띄어쓰기가 있어도 줄 바꿈하지 않는다. / 띄어쓰기 관계없이 무조건 한줄로 나오게 강제
    1. white-spcae: wrap : 줄바꿈
  2. over-flow : hidden; : 넘쳐흐르는 텍스트를 숨김처리
  3. text-overflow : ellipsis : 말 줄임표 / 한줄만 됨 / 잘린 부분은 ...으로 처리

!! 기존 width: fit-content로는 말줄임표 구현이 힘듦 -> auto

 

5. 텍스트가 5줄만 나오게 하는 방법

m : 현재 폰트사이즈의 배수

ex) 12px → 2em(24px)

 

  1. 5줄만 나오게 하기 예전 방식
    • line-height: normal;
    • line-height: 1.4
    • height: 1.4

곱하기 5줄에 해당하는 px -> 5em height: calc(1.4em * 5 )

 

  1. 베타버전, 아직 정식버전이 아님
    • webkit: vender prefix 브라우저 제조사의 표시 / caniuse.com webkit 해야 실행이 된다. 근데 아직 베타이므로, 나중에 정식이 되면 바뀔 수도 있다.
    • display: -webkit-box;
    • -webkit-box-orient: vertical;
    • -webkit-line-clamp: var(--line-clamp); → 6은 변수처리함
    • webkit 사용할 때 아래도 같이 적어두는게 좋을 거 같다.
    • line-height: 1.4;
    • height: calc(1.4em * var(--line-clamp));
    • line-height는 상속이 된다.

 

vender-Prefix

  • vender: 브라우저 제조사

웹 브라우저 제조사가 특정 CSS 속성을 지원하기 위해 표준이 완전히 확립되기 전에 사용하는 접두사이다. 브라우저 벤더들은 자사 브라우저에서 특정 기능을 실험적으로 지원하거나, 새로운 CSS 기능을 다른 브라우저보다 먼저 구현할 때 이러한 접두사를 사용한다.

주요 브라우저 벤더 프리필스

  • -webkit-: 구글 크롬, 사파리, 그리고 다른 Webkit 기반 브라우저에서 사용된다.
  • -moz: 파이어폭스에서 사용
  • -ms-: 인터넷 익스플로어와 초기 마이크로소프트 엣지 브라우저에서 사용된다.
  • -o-: 오페라 브라우저에서 사용된다.  

이는 나중 브라우저 업데이트에 따라서 속성이나 값이 사용법 또는 효과가 변경될수도 있다.

 

 

 

 

 

 

 

저작자표시 (새창열림)