ボックスからはみ出たテキストをドットに変換「dotdotdot」
当ページのリンクには広告が含まれています。
スポンサーリンク
ボックスからはみ出たテキストをドットに変換するプラグイン「dotdotdot」を紹介します。
jQueryプラグイン「dotdotdot」
ボックスからはみ出たテキストの処理には、cssの「overflow:hidden」を使う方法もありますが、テキストが切れてしまう場合があります。
このプラグインを使えば、ボックスからはみ出したテキストをドット「...」や「Read more」に変換し、適切に対処することができます。
クロスブラウザ対応の悩みの種がひとつ消えるかも!?しれません。
スポンサーリンク
デモでは、「設定なし」「css(overflow:hidden)」「dotdotdot」を並べていますので、その違いをいろいろなブラウザで確認してみてください。
デモのソース（HTML + jQuery）
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta name="description" content="dotdotdotのデモでーす。">
<title>dotdotdot - jQueryまとめのカルマ</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="jquery.dotdotdot.js"></script>
<script>
$(function() {
$('#dot').dotdotdot();
});
</script>
<style>
.box {
float: left;
margin: 20px;
padding: 20px;
border: 1px solid #ccc;
height: 250px;
width: 300px;
}
.inbox {
width: 250px;
height: 192px;
}
#hidden {
overflow: hidden;
}
</style>
</head>
<body>
<h1>dotdotdotのでもでーす。</h1>
<div class="box">
<p>設定なし</p>
<div class="inbox">But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally</div>
</div>
<div class="box">
<p>CSS(overflow:hidden)</p>
<div class="inbox" id="hidden">But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally</div>
</div>
<div class="box">
<p>dotdotdot</p>
<div class="inbox" id="dot">But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally</div>
</div>
</body>
</html>
jsファイルのダウンロード、さまざまなオプションやその他の詳細はこちらからどうぞ。
» dotdotdot
スポンサーリンク