jQuery limite de texte par longueur
puis-je cacher du texte dans une DIV après un certain nombre de caractères avec jQuery?
Jusqu'à présent, je pense qu'il serait aller quelque chose comme ceci - jQuery cycle par le texte jusqu'à ce qu'il arrive à un certain nombre de caractères. Il envelopperait alors un DIV de cette position jusqu'à la fin du texte qui pourrait alors être caché avec la méthode hide (). Je ne sais pas comment insérer ce texte d'emballage.
toute autre solution serait également appréciée.
Merci.
6 réponses
Cela permet de masquer une partie du texte
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>untitled</title>
<style type="text/css" media="screen">
.hide{
display: none;
}
</style>
<script src="js/jquery-1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(function(){
var $elem = $('p'); // The element or elements with the text to hide
var $limit = 10; // The number of characters to show
var $str = $elem.html(); // Getting the text
var $strtemp = $str.substr(0,$limit); // Get the visible part of the string
$str = $strtemp + '<span class="hide">' + $str.substr($limit,$str.length) + '</span>'; // Recompose the string with the span tag wrapped around the hidden part of it
$elem.html($str); // Write the string to the DOM
})
</script>
</head>
<body>
<p>Some lenghty string goes here</p>
</body>
</html>
je pense que le but peut être résolu beaucoup plus facile que de la manière expliquée ci-dessus
$(function(){
$(".title").each(function(i){
len=$(this).text().length;
if(len>10)
{
$(this).text($(this).text().substr(0,10)+'...');
}
});
});
le code jQuery ci-dessus masquera le texte div s'il dépasse 10 caractères ainsi que les annonces ... à la fin pour expliquer qu'il y est quelque chose de plus.
Jeff j'ai eu le même problème voulais ajouter le texte limiteur de contenu dynamique, voici donc ma solution:
// TEXT CHARACTER LIMITER
$(document).ready(function() {
$.fn.textlimit = function()
{
return this.each(function()
{
var $elem = $(this); // Adding this allows u to apply this anywhere
var $limit = 22; // The number of characters to show
var $str = $elem.html(); // Getting the text
var $strtemp = $str.substr(0,$limit); // Get the visible part of the string
$str = $strtemp + '<span class="hide">' + $str.substr($limit,$str.length) + '</span> ...';
$elem.html($str);
})
};
});
// Call the text limiter above
$(document).ready(function() {
$('.someGenericClass .anotherClass').textlimit()
});
je remplace ma réponse originale par celle-ci.....
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var limit = 20;
var chars = $("#myDiv").text();
if (chars.length > limit) {
var visiblePart = $("<span> "+ chars.substr(0, limit-1) +"</span>");
var dots = $("<span class='dots'>... </span>");
var hiddenPart = $("<span class='more'>"+ chars.substr(limit-1) +"</span>");
var readMore = $("<span class='read-more'>Read More</span>");
readMore.click(function() {
$(this).prev().remove(); // remove dots
$(this).next().show();
$(this).remove(); // remove 'read more'
});
$("#myDiv").empty()
.append(visiblePart)
.append(dots)
.append(readMore)
.append(hiddenPart);
}
});
</script>
<style type="text/css">
span.read-more { cursor: pointer; color: red; }
span.more { display: none; }
</style>
</head>
<body>
<div id="myDiv">Here are all<br/> my characters.<br/> I would like to limit them to 20.</div>
</body>
</html>
$.fn.textlimit = function(limit)
{
return this.each(function(index,val)
{
var $elem = $(this);
var $limit = limit;
var $strLngth = $(val).text().length; // Getting the text
if($strLngth > $limit)
{
$($elem).text($($elem).text().substr( 0, $limit )+ "...");
}
})
};
**how to use**
$("#DivId").textlimit(60);
si vous mettez un handler d'événement onkeydown sur l'étiquette de corps, vous pouvez alors compter la longueur dans le div of interest, puis vous pouvez le cacher une fois fait, et supprimer votre handler d'événement.