<!DOCTYPE html>
<html>
<head>
<style>
#ellipsis {
font-size: 18px;
border: 1px solid black;
width: 300px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
#clip {
font-size: 18px;
border: 1px solid black;
width: 300px;
overflow: hidden;
white-space: nowrap;
text-overflow: clip;
}
</style>
</head>
<body style="font: 75% Lucida Grande, Trebuchet MS">
<div id="ellipsis">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
laborum.</div>
<div id="clip">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
laborum.</div>
<p id="log" style="color: gray"></p>
</body>
</html>
'프론트기술 > Html+CSS' 카테고리의 다른 글
| HTML5 기본 Layout Template (0) | 2015.03.18 |
|---|---|
| HTML4 와 HTML5의 차이점 (0) | 2013.01.19 |
| 마우스 커서 CSS (0) | 2012.12.05 |
