CSS text-overflow 속성

CSS3 text-overflow Property

CSS text-overflow 속성

1 예시

<style>
div { width: 150px; border: 1px solid; }

.red1 { background: red; }
.red2 { background: red; overflow: hidden; }
.orange1 { background: orange; overflow: hidden; white-space: nowrap; }
.orange2 { background: orange; overflow: hidden; white-space: nowrap; text-overflow: clip; }
.yellow1 { background: yellow; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
</style>

<div class='red1'>어린이 여러분! 길 건널 땐 꼭 양쪽을 잘 살피세요.</div>
<div class='red2'>어린이 여러분! 길 건널 땐 꼭 양쪽을 잘 살피세요.</div>
<div class='orange1'>어린이 여러분! 길 건널 땐 꼭 양쪽을 잘 살피세요.</div>
<div class='orange2'>어린이 여러분! 길 건널 땐 꼭 양쪽을 잘 살피세요.</div>
<div class='yellow1'>어린이 여러분! 길 건널 땐 꼭 양쪽을 잘 살피세요.</div>

2 같이 보기

• CSS overflow 속성
• CSS white-space 속성
• CSS 텍스트

3 참고

• http://www.w3schools.com/cssref/css3_pr_text-overflow.asp
• https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow