CSS text-overflow 속성

CSS3 text-overflow Property
CSS text-overflow 속성

1 예시[ | ]

html

Copy

<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 같이 보기[ | ]

3 참고[ | ]