Multi-line Text Overflow Ellipsis

Story/Jquery

Multi-line Text Overflow Ellipsis

Stdio 2013. 8. 5. 17:12

글이 길어지면 ... 으로 줄이는대 한 줄 일때는 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>

소스파일 :

dotdotdot-1.6.1.zip

저작자표시