728x90
반응형
04_overflow.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>요안도라</title>
<style>
@import "../css/04_overflow.css";
</style>
</head>
<body>
<div class="container">
<section>
<h2>요안도라 소개</h2>
<article>
<p class="over1">성산의 날씨는 다음주 내내 높은 구름에 햇살 가득이라고 합니다. 목요일이면 섭씨
27도까지 오른다고 하지만, 늘 부는 바람이 쾌적한 균형을 잡아 마당에 마당에 나가 앉아 있는 시간이 많아질듯 합니다.</p>
<p class="over2">성산의 날씨는 다음주 내내 높은 구름에 햇살 가득이라고 합니다. 목요일이면 섭씨
27도까지 오른다고 하지만, 늘 부는 바람이 쾌적한 균형을 잡아 마당에 마당에 나가 앉아 있는 시간이 많아질듯 합니다.</p>
</article>
</section>
</div>
</body>
</html>04_overflow.css
@CHARSET "UTF-8";
.over1{
text-overflow: clip; /*잘라내기*/
}
.over2{
text-overflow: ellipsis; /*생략...*/
}
p{
font-size: 1.5em;
white-space: nowrap;/*[텍스트빈칸처리] nowrap 줄바꿈 한것을 무시, normal로 하면 그대로 다 출력, pre 죄다 표현*/
border: 1px solid black;
width: 400px;
padding: 10px;
margin-bottom: 10px;
margin-right: 10px;
overflow: hidden; /*영역을 초고하는 내용은 표시하지 않는다.*/
}
728x90
반응형
'WEB > CSS' 카테고리의 다른 글
| [CSS] ch02-06. indent (0) | 2017.08.23 |
|---|---|
| [CSS] ch02-05. decoration (0) | 2017.08.23 |
| [CSS] ch02-03. shadow (0) | 2017.08.23 |
| [CSS] ch02-02. align (정렬) (0) | 2017.08.23 |
| [CSS] ch02-01. font (폰트) (0) | 2017.08.23 |