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

[css] CSS - 글자자르기 (= 문자열자르기 = 문자열줄이기= 글자길이자르기 = 문자열자르기 = 글자수자르기 = 문자열길이제한 = 글자수길이제한 = 범위넘는글자숨기기 = 글자 줄이기 = 텍스트 줄이기) ★

목차
  1. CSS 글자 자르기 필수 속성
  2. CSS 글자 자르기 예제 - % 너비 경우
  3. CSS 글자 자르기 예제 - px 너비 경우
  4. CSS 글자 자르기 예제 - 여러 경우 비교
  5. HTML5 경우, <nobr> 태그 사용 금지

 

CSS 글자 자르기 필수 속성

※ 아래 4가지 속성 모두 필요.

 

  • width:100px - 글이 출력될 일정 너비. 
  • text-overflowclip - 글자 자른 후, 뒤에 아무 것도 안 붙임. (cf. text-overflowellipsis - 글자 자른 후, 뒤에 ... 생략 표시 추가.) 
  • overflow:hidden; - 고정된 너비를 넘어간 글을 숨기기.
  • white-space:nowrap; - 고정된 너비 안에서 자동 줄바꿈 발생 제거.

 

 

CSS 글자 자르기 예제 - % 너비 경우

 

<style>

div {

  border:1px solid red;

  width:25%;

}

div p {

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

  width: 90%;

  height: 20px;

}
</style>

 

<div>

  <p>홈페이지 제작관리 서버관리 강의</p>

  <p>홈짱닷컴 Hpmzzang.com (2012)</p>

</div>

 

결과보기

 

CSS 글자 자르기 예제 - px 너비 경우


<style>
.homzzang {
  display:inline-block;
  width:230px;
  white-space: nowrap;
  overflow: hidden; 
  text-overflowellipsis;
  border:1px solid silver;
  padding:5px 10px;
}
</style>
 
<div class="homzzang">
홈짱닷컴 (homzzang.com) HTML CSS JS SQL PHP JQuery 무료 학습 사이트
</div>

결과보기
도움: 은토리 님

 

CSS 글자 자르기 예제 - 여러 경우 비교

 

<style>

p {width:100px; height:20px; margin-bottom:50px; border:1px solid red;}

p.a {text-overflow:clip; overflow:hidden;}

p.b {text-overflow:ellipsis; overflow:hidden;white-space:nowrap;}

p.c {text-overflow:....;}

p.d {text-overflow:string; white-space:nowrap;}

</style>

<p class="a">홈짱닷컴 (homzzang.com)</p>
<p class="b">홈짱닷컴 (homzzang.com)</p>
<p class="c">홈짱닷컴 (homzzang.com)</p>
<p class="d">홈짱닷컴 (homzzang.com)</p>


결과보기

 
PS.

HTML5 경우, <nobr> 태그 사용 금지

 

<nobr style='display:block;overflow:hidden;width:400px'>긴 문자열</nobr>


※ <nobr> 태그는 HTML5 제외됨. white-space:nowrap 속성 이용.

 

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

분류 제목
transition CSS - transition-duration 속성 ★ - 트랜지션 완료에 걸리는 시간 (= transiti…
transition CSS - transition-property 속성 - 트랜지션 효과 적용할 속성명 지정 (= transit…
transition CSS - transition-timing-function 속성 - 트랜지션 속도변경곡선 (= transit…
animation CSS - @keyframes 구문 - 애니메이션 코드 사용 선언 (= 애니사용 = @keyframes속성 …
animation CSS - animation 속성 ★ - 애니메이션 단축속성 (= animation속성 = 애니메이션속성, …
animation CSS - animation-delay 속성 - 애니지연시간 (= 작동지연시간 = 작동대기시간 = 작동준비시…
animation CSS - animation-direction 속성 - 애니방향 (= 움직임방향 = 애니메이션디렉션속성, I…
animation CSS - animation-duration 속성 - 애니지속시간 (= 애니완료소요시간 = 움직임완료소요시간…
animation CSS - animation-fill-mode 속성 - 애니미작동스타일 (= 움직임 작동안할때 스타일 = 애…
animation CSS - animation-iteration-count 속성 - 애니반복횟수 (= 움직임반복횟수, IE10…
animation CSS - animation-name 속성 - 키프레임명 (= 키프레임이름 = 애니이름 = 애니명 = 애니메…
animation CSS - animation-play-state 속성 - 애니재생상태 (= 애니작동상태설정 = 움직임 재생/…
animation CSS - animation-timing-function 속성 - 애니재생중속도변화 (= 움직임 중 속도변경…
image CSS - Rounded Images (둥근/동그란 이미지 만들기 = 이미지 테두리 둥글게/동그랗게) - I…
image CSS - Thumbnail Images - (썸네일 이미지 스타일)
image CSS - enter an Image (이미지 가운데정렬)
image CSS - Image Text - (이미지 위에 텍스트 배치/띄우기)
image CSS - Polaroid Images / Cards - (폴라로이드 이미지)
image CSS - Image Filter - (이미지 필터 - 흑백/흐림 효과)
image CSS - Image Hover Overlay - (이미지 마우스오버시 효과 = 이미지허버효과 = 이미지마우…
9/25
목록
찾아주셔서 감사합니다. Since 2012