ホームページ >ウェブフロントエンド >jsチュートリアル >jQueryはテキストが1行、2行、または指定行数を超えた場合に自動的に省略記号を追加するメソッドを実装します
jQueryはテキストが1行、2行、または指定行数を超えた場合に自動的に省略記号を追加するメソッドを実装します
- 亚连オリジナル
- 2018-05-28 15:56:392004ブラウズ
この記事では、テキストが 1 行、2 行、または指定された行数を超えた場合に自動的に省略記号を追加する jQuery の方法を主に紹介します。これには、ページ要素の属性の動的な操作に関連する jQuery の実装スキルが含まれます。この記事
テキストが1行、2行、または指定行数を超えた場合に、jQueryで自動的に省略記号を追加する方法について説明します。参考のために皆さんと共有してください。詳細は次のとおりです:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>www.jb51.net jQuery自动添加省略号</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$(".figcaption").each(function (i) {
var pH = $(this).height();
var $p = $("p", $(this)).eq(0);
while ($p.outerHeight() > pH) {
$p.text($p.text().replace(/(\s)*([a-zA-Z0-9]+|\W)(\.\.\.)?$/, "..."));
};
});
});
</script>
<style>
*{
padding: 0px;
margin: 0px;
}
.figcaption{
width: 300px;
height: 50px;
/*根据父元素的高度来添加省略号
*可以任意设置显示的行数
*/
border: 1px solid red;
}
</style>
</head>
<body>
<p class="figcaption">
<p>
You probably can't do it (currently?) without a fixed-width font like Courier. With
a fixed-width font every letter occupies the same horizontal space, so you could
probably count the letters and multiply the result with the current font size in
ems or exs. Then you would just have to test how many letters fit on one line, and
then break it up.</p>
</p>
</body>
<script>
</script>
</html>
操作効果:
上記は皆さんのためにまとめたものです。将来的に皆さんに役立つことを願っています。
関連記事:
以上がjQueryはテキストが1行、2行、または指定行数を超えた場合に自動的に省略記号を追加するメソッドを実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。