728x90
CSS에서 말줄임 처리하는 법은 다음과 같다.
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
CSS에서 개행 처리 하는 법은 다음과 같다.
white-space: wrap;
word-break: break-all;
Text '...' 처리, 개행 처리
예시코드
<html>
<head>
<title>Page Title</title>
</head>
<style>
.s1 {
border: 1px solid #ddd;
background-color: #f8f9fb;
font-family: Noto Sans KR;
padding: 1px 3px;
width: 200px;
}
</style>
<body>
<div class="s1"
style="overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
word-break: break-all;">
<span>말줄임 표시 테스트 말줄임 표시 테스트</span>
</div>
<div style="height: 10px;"></div>
<div class="s1"
style="white-space: wrap;
word-break: break-all;">
<span>개행 테스트 개행 테스트 개행 테스트</span>
</div>
</body>
</html>
결과
728x90
'Frontend > CSS' 카테고리의 다른 글
| [CSS]헥스(hex)코드 투명도 조절하기 (0) | 2024.04.12 |
|---|---|
| [CSS]Flexbox Froggy 소개 및 정답 - CSS 코드 게임 (0) | 2024.01.08 |
| [CSS] 채팅에 사용할 말풍선 만들기 (2) | 2023.10.28 |
| [CSS] hr 태그 색상 변경하기/ HTML 선 색상 변경하기 (0) | 2023.10.16 |
| [CSS] quasar에 정의되어있는 가상 선택자 클래스 css 변경하기 (0) | 2023.10.14 |
