• 회원가입
  • 로그인

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

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

 

CSS 글자 자르기 필수 속성

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

 

1.

width:100px

글이 출력될 일정 너비. 

2.
text-overflowclip

글자 자른 후, 뒤에 아무 것도 안 붙임.

cf.

text-overflowellipsis

글자 자른 후, 뒤에 ... 생략 표시 추가.

3. 
overflow:hidden;
고정된 너비를 넘어간 글을 숨기기.

4.
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)

찾아주셔서 감사합니다. Since 2012