반응형
출처 : http://dotdotdot.frebsite.nl/
글이 길어지면 ... 으로 줄이는대 한 줄 일때는 overflow: hidden; white-space: nowrap; text-overflow: ellipsis; 등을 사용하여 표현이 가능한대 여러 줄 일경우에는 표현이 힘들어 진다.
구굴링으로 찾아보았는대 css 로 처리하는것도 있고 jquery 로 처리하는것도 있는대 jquery 로 처리하는게 가장 간단해 보였다.
사용방법은
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
<meta name="author" content="www.frebsite.nl" />
<title>dotdotdot, advanced cross-browser ellipsis for multiple line content.</title>
<script type="text/javascript" language="javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript" language="javascript" src="jquery.dotdotdot.min.js"></script>
<script type="text/javascript" language="javascript">
$(function() {
$('#dot1').dotdotdot();
$('#dot2').dotdotdot();
$('#dot3').dotdotdot({
after: 'a.more'
});
$('#dot4').dotdotdot({
watch: 'window'
});
$('#dot5 .pathname').each(function() {
var path = $(this).html().split( '/' );
if ( path.length > 1 ) {
var name = path.pop();
$(this).html( path.join( '/' ) + '<span class="filename">/' + name + '</span>' );
$(this).dotdotdot({
after: '.filename',
wrap: 'letter'
});
}
});
});
</script>
<st yle type="text/css" media="all">
html, body {
padding: 0;
margin: 0;
height: 100%;
}
body, div, p {
font-family: Arial, Helvetica, Verdana;
color: #333;
-webkit-text-size-adjust: none;
}
body {
background-color: #f3f3f3;
}
a, a:link, a:active, a:visited {
color: black;
text-decoration: underline;
}
a:hover {
color: #9E1F63;
}
#wrapper {
background-color: #fff;
width: 600px;
padding: 50px 50px 0 50px;
margin: 0 auto;
border: 1px solid #ccc;
box-shadow: 0 0 5px #ccc;
}
#intro {
margin-bottom: 60px;
}
#intro p {
font-size: 18px;
}
div.example {
padding: 0 0 150px 0;
}
div.example:after {
content: '';
display: block;
clear: both;
}
div.example p {
margin: 0 0 10px 0;
}
div.l {
width: 275px;
float: left;
}
div.r {
width: 275px;
float: right;
}
div.box {
border: 1px solid #ccc;
height: 160px;
padding: 15px 20px 10px 20px;
/* overflow: hidden; */
}
div.resize {
padding-bottom: 250px;
}
div.resize div.box {
position: absolute;
width: 40%;
height: 100px;
}
div.resize div.box.before {
right: 50%;
margin-right: 10px;
}
div.resize div.box.after {
left: 50%;
margin-left: 10px;
}
div.box.before {
background-color: #ffeeee;
}
div.box.after {
background-color: #eeffee;
}
p.before {
color: #990000;
}
p.after {
color: #006600;
}
div.box.pathname {
height: auto;
}
.pathname {
height: 25px;
}
</st yle>
</head>
<body>
<br />
<br />
<div id="wrapper">
<div id="intro">
<h1>jQuery.dotdotdot</h1>
<p>Advanced cross-browser ellipsis for multiple line content.<br />
Demo's and documentation: <a href="http://dotdotdot.frebsite.nl" target="_blank">dotdotdot.frebsite.nl</a></p>
</div>
<div class="example">
<p><strong>Text only:</strong></p>
<div class="l">
<p class="before">before:</p>
<div class="box before">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</div>
</div>
<div class="r">
<p class="after">after:</p>
<div class="box after" id="dot1">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</div>
</div>
</div>
<div class="example">
<p><strong>Text with markup:</strong></p>
<div class="l">
<p class="before">before:</p>
<div class="box before">
<p><em>Lorem Ipsum</em> is simply dummy text of the <strong>printing</strong> and <strong>typesetting industry</strong>.</p>
<p><em>Lorem Ipsum</em> has been the industry's standard dummy text ever since <strong>the 1500s</strong>, when an unknown printer took a <em>galley of type</em> and scrambled it to make a type specimen book.</p>
<p>It has survived not only <strong>five centuries</strong>, but also the leap into <strong>electronic typesetting</strong>.</p>
</div>
</div>
<div class="r">
<p class="after">after:</p>
<div class="box after" id="dot2">
<p><em>Lorem Ipsum</em> is simply dummy text of the <strong>printing</strong> and <strong>typesetting industry</strong>.</p>
<p><em>Lorem Ipsum</em> has been the industry's standard dummy text ever since <strong>the 1500s</strong>, when an unknown printer took a <em>galley of type</em> and scrambled it to make a type specimen book.</p>
<p>It has survived not only <strong>five centuries</strong>, but also the leap into <strong>electronic typesetting</strong>.</p>
</div>
</div>
</div>
<div class="example">
<p><strong>With an "after"-element:</strong></p>
<div class="l">
<p class="before">before:</p>
<div class="box before">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
<a href="#" class="readmore">Read more »</a></div>
</div>
<div class="r">
<p class="after">after:</p>
<div class="box after" id="dot3">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
<a href="#" class="more">Read more »</a></div>
</div>
</div>
<div class="example resize">
<p><strong>Updating onWindowResize:</strong></p>
<div class="l">
<p class="before">before:</p>
<div class="box before">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</div>
</div>
<div class="r">
<p class="after">after:</p>
<div class="box after" id="dot4">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</div>
</div>
</div>
<div class="example">
<p><strong>Truncate readable pathnames</strong></p>
<div class="l">
<p class="before">before:</p>
<div class="box before pathname">
<div class="pathname">www.website.com/file.html</div>
<div class="pathname">www.website.com/with/a/long/pathname/file.html</div>
</div>
</div>
<div class="r">
<p class="after">after:</p>
<div class="box after pathname" id="dot5">
<div class="pathname">www.website.com/file.html</div>
<div class="pathname">www.website.com/with/a/long/pathname/file.html</div>
</div>
</div>
</div>
</div>
<br />
<br />
</body>
</html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
<meta name="author" content="www.frebsite.nl" />
<title>dotdotdot, advanced cross-browser ellipsis for multiple line content.</title>
<script type="text/javascript" language="javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript" language="javascript" src="jquery.dotdotdot.min.js"></script>
<script type="text/javascript" language="javascript">
$(function() {
$('#dot1').dotdotdot();
$('#dot2').dotdotdot();
$('#dot3').dotdotdot({
after: 'a.more'
});
$('#dot4').dotdotdot({
watch: 'window'
});
$('#dot5 .pathname').each(function() {
var path = $(this).html().split( '/' );
if ( path.length > 1 ) {
var name = path.pop();
$(this).html( path.join( '/' ) + '<span class="filename">/' + name + '</span>' );
$(this).dotdotdot({
after: '.filename',
wrap: 'letter'
});
}
});
});
</script>
<st yle type="text/css" media="all">
html, body {
padding: 0;
margin: 0;
height: 100%;
}
body, div, p {
font-family: Arial, Helvetica, Verdana;
color: #333;
-webkit-text-size-adjust: none;
}
body {
background-color: #f3f3f3;
}
a, a:link, a:active, a:visited {
color: black;
text-decoration: underline;
}
a:hover {
color: #9E1F63;
}
#wrapper {
background-color: #fff;
width: 600px;
padding: 50px 50px 0 50px;
margin: 0 auto;
border: 1px solid #ccc;
box-shadow: 0 0 5px #ccc;
}
#intro {
margin-bottom: 60px;
}
#intro p {
font-size: 18px;
}
div.example {
padding: 0 0 150px 0;
}
div.example:after {
content: '';
display: block;
clear: both;
}
div.example p {
margin: 0 0 10px 0;
}
div.l {
width: 275px;
float: left;
}
div.r {
width: 275px;
float: right;
}
div.box {
border: 1px solid #ccc;
height: 160px;
padding: 15px 20px 10px 20px;
/* overflow: hidden; */
}
div.resize {
padding-bottom: 250px;
}
div.resize div.box {
position: absolute;
width: 40%;
height: 100px;
}
div.resize div.box.before {
right: 50%;
margin-right: 10px;
}
div.resize div.box.after {
left: 50%;
margin-left: 10px;
}
div.box.before {
background-color: #ffeeee;
}
div.box.after {
background-color: #eeffee;
}
p.before {
color: #990000;
}
p.after {
color: #006600;
}
div.box.pathname {
height: auto;
}
.pathname {
height: 25px;
}
</st yle>
</head>
<body>
<br />
<br />
<div id="wrapper">
<div id="intro">
<h1>jQuery.dotdotdot</h1>
<p>Advanced cross-browser ellipsis for multiple line content.<br />
Demo's and documentation: <a href="http://dotdotdot.frebsite.nl" target="_blank">dotdotdot.frebsite.nl</a></p>
</div>
<div class="example">
<p><strong>Text only:</strong></p>
<div class="l">
<p class="before">before:</p>
<div class="box before">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</div>
</div>
<div class="r">
<p class="after">after:</p>
<div class="box after" id="dot1">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</div>
</div>
</div>
<div class="example">
<p><strong>Text with markup:</strong></p>
<div class="l">
<p class="before">before:</p>
<div class="box before">
<p><em>Lorem Ipsum</em> is simply dummy text of the <strong>printing</strong> and <strong>typesetting industry</strong>.</p>
<p><em>Lorem Ipsum</em> has been the industry's standard dummy text ever since <strong>the 1500s</strong>, when an unknown printer took a <em>galley of type</em> and scrambled it to make a type specimen book.</p>
<p>It has survived not only <strong>five centuries</strong>, but also the leap into <strong>electronic typesetting</strong>.</p>
</div>
</div>
<div class="r">
<p class="after">after:</p>
<div class="box after" id="dot2">
<p><em>Lorem Ipsum</em> is simply dummy text of the <strong>printing</strong> and <strong>typesetting industry</strong>.</p>
<p><em>Lorem Ipsum</em> has been the industry's standard dummy text ever since <strong>the 1500s</strong>, when an unknown printer took a <em>galley of type</em> and scrambled it to make a type specimen book.</p>
<p>It has survived not only <strong>five centuries</strong>, but also the leap into <strong>electronic typesetting</strong>.</p>
</div>
</div>
</div>
<div class="example">
<p><strong>With an "after"-element:</strong></p>
<div class="l">
<p class="before">before:</p>
<div class="box before">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
<a href="#" class="readmore">Read more »</a></div>
</div>
<div class="r">
<p class="after">after:</p>
<div class="box after" id="dot3">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
<a href="#" class="more">Read more »</a></div>
</div>
</div>
<div class="example resize">
<p><strong>Updating onWindowResize:</strong></p>
<div class="l">
<p class="before">before:</p>
<div class="box before">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</div>
</div>
<div class="r">
<p class="after">after:</p>
<div class="box after" id="dot4">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</div>
</div>
</div>
<div class="example">
<p><strong>Truncate readable pathnames</strong></p>
<div class="l">
<p class="before">before:</p>
<div class="box before pathname">
<div class="pathname">www.website.com/file.html</div>
<div class="pathname">www.website.com/with/a/long/pathname/file.html</div>
</div>
</div>
<div class="r">
<p class="after">after:</p>
<div class="box after pathname" id="dot5">
<div class="pathname">www.website.com/file.html</div>
<div class="pathname">www.website.com/with/a/long/pathname/file.html</div>
</div>
</div>
</div>
</div>
<br />
<br />
</body>
</html>
소스파일 :
dotdotdot-1.6.1.zip
반응형
'Story > Jquery' 카테고리의 다른 글
| jQuery Marquee (0) | 2013.08.05 |
|---|---|
| 이미지맵 image map 확인 (0) | 2013.08.05 |
| javascript 이용 flash param 값 변경 (0) | 2013.04.05 |
| Jquery 를 이용하여 HTML5 placeholder 를 적용시키기 (0) | 2013.03.18 |
| 이미지 확대 효과 (돋보기 효과) JQZoom (0) | 2013.03.13 |