CSS

[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)

분류 제목
intro CSS - 정의・장점・구문・초기화 + 주석
intro CSS - 발전사 (CSS1 → CSS2.01 → CSS) + 제작관리 단체
intro CSS - 스타일 적용 방법 3가지 ★★★ - (인라인스타일 / 내부스타일 / 외부스타일) CSS적용순서 +…
selector CSS - 선택자 (Selector) 종류 + 선택자에 사용가능한 문자 (= 선택자 이름짓기 주의사항)
selector CSS - ID선택자, class선택자 + CSS우선순위 ★★★ (= 아이디선택자, 클래스선택자, CSS명시…
selector CSS - * 전체선택자 - 모든 요소 선택. (요소선택자군) ※ 아스테리크 (asterisk) 선택자 = …
selector CSS - element 요소선택자 ★ - 지정 요소 선택. (요소선택자군)
selector CSS - element,element 병렬선택자 ★ - 쉼표로 나열된 여러 요소 선택. (= 여러 요소선택…
selector CSS - element element 자손선택자 ★ - 자손요소 (요소선택자)
1/33
목록
 홈  PC버전 로그인 일본어
웹디자인언어
서버관리언어
고급코딩언어
그누보드 2
제작의뢰
Q&A
커뮤니티 2
웹유틸
회원센터
홈짱 PC버전 로그인