Post
기본
HTML
<span class="target">
가나다라마바사아자차카타파하하아가나나다나마바사아자가차각마나알낭ㄹ가나다라마바사아자차카타파하하아가나나다나마바사아자가차각마나알낭ㄹ가나다라마바사아자차카타파하하아가나나다나마바사아자가차각마나알낭ㄹ가나다라마바사아자차카타파하하아가나나다나마바사아자가차각마나알낭ㄹ가나다라마바사아자차카타파하하아가나나다나마바사아자가차각마나알낭ㄹ가나다라마바사아자차카타파하하아가나나다나마바사아자가차각마나알낭ㄹㅇ
</span>
SCSS
.target {
display: block;
width: 500px;
}
ON BROWSER
white-space:nowrap
HTML
<span class="target">
가나다라마바사아자차카타파하하아가나나다나마바사아자가차각마나알낭ㄹ가나다라마바사아자차카타파하하아가나나다나마바사아자가차각마나알낭ㄹ가나다라마바사아자차카타파하하아가나나다나마바사아자가차각마나알낭ㄹ가나다라마바사아자차카타파하하아가나나다나마바사아자가차각마나알낭ㄹ가나다라마바사아자차카타파하하아가나나다나마바사아자가차각마나알낭ㄹ가나다라마바사아자차카타파하하아가나나다나마바사아자가차각마나알낭ㄹㅇ
</span>
SCSS
.target {
display: block;
width: 500px;
white-space: nowrap;
}
ON BROWSER
text-overflow: ellipsis
HTML
<span class="target">
가나다라마바사아자차카타파하하아가나나다나마바사아자가차각마나알낭ㄹ가나다라마바사아자차카타파하하아가나나다나마바사아자가차각마나알낭ㄹ가나다라마바사아자차카타파하하아가나나다나마바사아자가차각마나알낭ㄹ가나다라마바사아자차카타파하하아가나나다나마바사아자가차각마나알낭ㄹ가나다라마바사아자차카타파하하아가나나다나마바사아자가차각마나알낭ㄹ가나다라마바사아자차카타파하하아가나나다나마바사아자가차각마나알낭ㄹㅇ
</span>
SCSS
.target {
display: block;
width: 500px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
ON BROWSER
'CSS & SCSS related' 카테고리의 다른 글
| SCSS Hamburger Menu (0) | 2023.01.21 |
|---|---|
| SCSS Responsive Web Design (0) | 2023.01.21 |
| SCSS Keyframe Animation Basic (0) | 2023.01.20 |
| SCSS before & after Bar (0) | 2023.01.20 |
| SCSS Translate (0) | 2023.01.20 |