일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |
Tags
- Linux 파일 관리 명령어
- Linux apt
- Linux mkdir
- Linux cat
- Linux 디렉터리 구조
- Logback
- AWS EC2 서버 만들기
- Navigation Pattern
- EC2 oh my zsh
- 아비트럼 새폴리아 이더 받는법
- ec2 ssh unprotected private key file
- EC2 zsh
- HTTP Web Server
- EC2 HTTP 호스팅
- linux background
- arbitrum sepolia eth
- Linux cd
- Linux apt-get
- javascript scope
- 서버의 서비스 방식
- Linux ls
- linux foreground
- UNPROTECTED PRIVATE KEY FILE
- Linux pwd
- Linux 디렉터리 명령어
- javascript 정렬
- EC2 Apache2
- Linux oh my zsh
- Linux 디렉터리 역할
- Linux rmdir
Archives
- Today
- Total
HyunJun 기술 블로그
text-overflow 본문
728x90
반응형
text-overflow
CSS의 text-overflow 속성은 텍스트가 요소 내에서 넘칠 때 어떻게 처리할지를 지정하는 속성이다. 특히, 요소의 크기가 텍스트를 표시하는 데에 충분하지 않을 경우 텍스트 오버플로우(overflow)가 발생할 수 있다. text-overflow 속성은 이러한 상황에서 어떻게 처리할지를 지정하여 텍스트의 보기 방식을 결정한다. text-overflow 속성은 주로 white-space: nowrap; (텍스트 줄바꿈 금지) 속성과 함께 사용된다.
text-overflow 속성은 다음과 같은 값들을 가질 수 있다.
- clip: 넘치는 텍스트를 자르고, 요소의 영역 내에서만 보여준다. 잘린 텍스트는 보이지 않는다. 요소의 overflow 속성이 hidden이거나 auto일 경우에만 작동한다.
- ellipsis: 넘치는 텍스트를 자르고, 잘린 부분을 생략 부호(...)로 표시한다. 요소의 overflow 속성이 hidden이거나 auto일 경우에만 작동한다. 또한, 요소의 너비가 정해져 있거나, width, max-width, flex-basis와 같은 너비 관련 속성을 가져야 한다.
text-overflow 속성을 사용하려면 white-space 속성을 nowrap로 설정하여 텍스트가 줄바꿈 되지 않도록 해야 한다.
<head>
<style>
.container {
background-color: beige;
width: 150px;
height: 150px;
white-space: nowrap;
overflow: hidden;
text-overflow: clip;
}
</style>
</head>
<body>
<div class="container">texttexttexttexttexttexttexttexttexttexttexttext</div>
</body>
728x90
반응형
Comments