• 회원가입
  • 로그인
  • 구글아이디로 로그인

[text] CSS - text-overflow 속성 ★ - 영역 이탈 글자 처리 (= text-overflow속성 = 텍스트오버플로속성)

목차
  1. text-overflow 속성 ★ - 너비 벗어난 글자 처리
  2. text-overflow 정의
  3. text-overflow 구문
  4. text-overflow 예제 - hover 시, 숨겨진 텍스트 보기 ★

 

text-overflow 속성 ★ - 너비 벗어난 글자 처리 

 

<style> 

div.a {

  white-space: nowrap; 

  width: 120px; 

  overflow: hidden;

  text-overflow: clip; 

  border: 1px solid red;

}


div.b {

  white-space: nowrap; 

  width: 120px; 

  overflow: hidden;

  text-overflow: ellipsis; 

  border: 1px solid red;

}


div.c {

  white-space: nowrap; 

  width: 120px; 

  overflow: hidden;

  text-overflow: "----"; 

  border: 1px solid red;

}

</style>


<h2>text-overflow: clip (기본값):</h2>

<div class="a">홈짱닷컴 Homzzang.com</div>


<h2>text-overflow: ellipsis:</h2>

<div class="b">홈짱닷컴 Homzzang.com</div>


<h2>text-overflow: "----" (사용자정의 문자열 : Firefox만 작동):</h2>

<div class="c">홈짱닷컴 Homzzang.com</div>


결과보기

 

text-overflow 정의

 

지정 너비를 넘는 텍스트 처리 방법 지정.

(예) 자르거나 말줄임표 붙이거나 사용자정의 문자열 지정 가능.



 

1.

  • 기본값: clip
  • 상속여부: X
  • 애니효고: X
  • CSS버전: CSS3
  • JS구문: object.style.textOverflow="ellipsis"

 

2.

아래 속성과 함께 사용.

 

3.

주요 최신 브라우저 모두 지원.

 

 

text-overflow 구문

 

selector {text-overflow: 속성값;}

 


[속성값]

 

clip

텍스트 자르고, 잘린 텍스트에 접근 불가.

 

ellipsis

줄임표 ( "...") 추가해 짤린 텍스트임을 표시.

 

string

사용자정의 문자열로 잘린 텍스트임을 표시. (Firefox만 지원)

 

initial

이 속성의 기본값으로 자동설정.

 

inherit

부모요소의 속성값 상속.

 

 

text-overflow 예제 - hover 시, 숨겨진 텍스트 보기 ★

 

<style> 

div.hz {

  white-space: nowrap; 

  width: 120px; 

  overflow: hidden;

  text-overflow: ellipsis; 

  border: 1px solid red;

}

div.hz:hover {

  overflow: visible;

}

</style>

<div class="hz">홈짱닷컴 Homzzang.com</div>

 

결과보기


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
column CSS - column-span 속성 - 컬럼 병합 여부 지정 (= 컬럼병합 = 컬럼확장 = column-s…
column CSS - column-width 속성 - 컬럼 너비 지정 (= column-width속성 = 컬럼위드스속성…
column CSS - columns 속성 - (컬럼최소너비/컬럼개수) 일괄 지정 (= columns속성 = 컬럼즈속성)
box CSS - box-sizing 속성 ★★ - 너비결정방식 (= 길이결정방식 = box-sizing속성 = 박…
flex CSS - FlexBox (플렉스박스) 소개 ★★★ - 새로운 반응형 레이아웃 모델 ※ (가로/세로) (기본…
flex CSS - flex-direction 속성(C) ★★ - 기본축 방향 결정. (= flex-direction…
flex CSS - justify-content 속성(C) ★★★ - 기본축에서 아이템 정렬. (= justify-…
flex CSS - align-items 속성(C) ★★★ - 교차축에서 아이템 정렬. (= align-items속성… 2
flex CSS - flex-wrap 속성(C) ★ - 아이템 줄바꿈 가능 여부. (= flex-wrap속성 = 플렉…
flex CSS - align-content 속성(C) ★★ - 줄바꿈 된 경우, 교차축 기준으로 라인 정렬. (= …
flex CSS - flex-flow 속성(C) ☆ - (flex-direction / flex-wrap) 속성 일괄…
flex CSS - order 속성(I) - 아이템 순서 재조정 (= order속성 = 오더속성, IE11) ※ 플렉…
flex CSS - align-self 속성(I) ★ - 교차축 기준으로, 아이템 자체 정렬. (= align-sel…
responsive CSS - @media 구문 - 미디어쿼리 이용한 반응형 스타일 구현 (= media쿼리) ※ IE/Edge…
responsive CSS - RES Intro - (반응형 웹디자인 소개)
responsive CSS - Viewport ★ - 사용자에게 보이는 웹페이지 영역 (= 메타태그 뷰포트 ※ 반응형 필수조건 …
responsive CSS - RES Grid-View - (그리드뷰 = 화면너비분할 = 화면분할 = 수동그리드)
responsive CSS - Responsive Image - (반응형 이미지) ★★★
responsive CSS - RES Video - (반응형 동영상)
responsive CSS - RES Frameworks - (반응형 프레임워크) - 반응형홈페이지틀
11/25
목록
찾아주셔서 감사합니다. Since 2012