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

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

CSS 글자 자르기 필수 속성

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

 

• width:100px - 글이 출력될 일정 너비. 
• text-overflow: clip - 글자 자른 후, 뒤에 아무 것도 안 붙임. (cf. text-overflow: ellipsis - 글자 자른 후, 뒤에 ... 생략 표시 추가.) ★
• 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-overflow: ellipsis;

  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>

결과보기

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