목차
- CSS 글자 자르기 필수 속성
- CSS 글자 자르기 예제 - % 너비 경우
- CSS 글자 자르기 예제 - px 너비 경우
- CSS 글자 자르기 예제 - 여러 경우 비교
- HTML5 경우, <nobr> 태그 사용 금지
CSS 글자 자르기 필수 속성
※ 아래 4가지 속성 모두 필요.
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>
결과보기
PS.
HTML5 경우, <nobr> 태그 사용 금지
<nobr style='display:block;overflow:hidden;width:400px'>긴 문자열</nobr>
※ <nobr> 태그는 HTML5 제외됨. white-space:nowrap 속성 이용.