HTML, CSS
(34)CSS_CSS텍스트5
빠스무
2023. 3. 29. 18:16
728x90
- CSS CSS텍스트 5번째 예제
- 사용하는 태그에 관한 문법 설명은 아래 링크로 가서 확인 가능하다.
- https://jm-rograming.tistory.com/54
(15)CSS_기본 문법
CSS(Cascading Style Sheets) 웹 페이지의 특정 요소 또는 그룹에 적용할 스타일 그룹을 지정하는 규칙을 정의하는 언어 ✔ 참고 MDN: https://developer.mozilla.org/ko/ MDN Web Docs The MDN Web Docs site provides information a
jm-rograming.tistory.com
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 텍스트5</title>
<style>
p{display : inline-block; width: 200px; border: 1px solid red;}
.tof1{white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.tof1{white-space: nowrap; overflow: hidden; text-overflow: clip;}
.of1{height: 150px; overflow: scroll;}
.of2{height: 150px; overflow-x: hidden; overflow-y: scroll;}
.content{
border: 3px dotted deeppink;
width: 400px;
padding: 10px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.content:hover{
overflow: visible
}
</style>
</head>
<body>
<h2>css 텍스트5</h2>
<p class = "tof1">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odio at placeat aspernatur doloribus repellendus magni esse vel magnam rem! Velit voluptatum quas, dolores accusamus nisi ipsa vel soluta eveniet adipisci!</p>
<p class = "tof2">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odio at placeat aspernatur doloribus repellendus magni esse vel magnam rem! Velit voluptatum quas, dolores accusamus nisi ipsa vel soluta eveniet adipisci!</p>
<p class = "of1">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odio at placeat aspernatur doloribus repellendus magni esse vel magnam rem! Velit voluptatum quas, dolores accusamus nisi ipsa vel soluta eveniet adipisci!</p>
<p class = "of2">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odio at placeat aspernatur doloribus repellendus magni esse vel magnam rem! Velit voluptatum quas, dolores accusamus nisi ipsa vel soluta eveniet adipisci!</p>
<p class = "content">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odio at placeat aspernatur doloribus repellendus magni esse vel magnam rem! Velit voluptatum quas, dolores accusamus nisi ipsa vel soluta eveniet adipisci!</p>
</body>
</html>
