728x90
반응형
게시판에 글이 노출될때 타이틀이 길면 말이 잘리거나 두줄로 나타나는 경우가 있는데요
이럴때 유용한 말줄이기 팁을 알려드리겠습니다.
클래스를 long, short 두가지로 만들었으니, 하단에 소스를 카피해서 확인해 보세요~
<style>
.long {
width:100px;
overflow:hidden;
text-overflow:visibile;
border:1px solid #000;
margin-bottom:20px;}
.short {
width:100px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
border:1px solid red;}
</style>
<body>
<div class="long">말줄임 활용하기 참 쉽죠???</div>
<div class="short">말줄임 활용하기 참 쉽죠???</div>
</body>
아래는 적용된 모습입니다. ^-^
728x90
반응형
'공부 > html, css' 카테고리의 다른 글
| css3 Animations 속성 (animation, keyframes) (0) | 2023.01.07 |
|---|---|
| 자동줄바꿈 : 긴 텍스트 줄 바꿈 안될 때 (word-break:break-all;) (0) | 2023.01.07 |
| 자동줄바꿈 속성 (white-space, word-break, word-wrap, text-overflow) (0) | 2023.01.07 |
| 크로스브라우징 CSS핵 (0) | 2023.01.07 |
| 마우스오버 시 효과 넣기 (background-position) (0) | 2023.01.07 |
