Puis-je masquer du texte dans un div après plusieurs personnages avec jQuery?
Jusqu'à présent, je pense que cela irait quelque chose comme ça - JQuery ferait parcourir le texte jusqu'à ce qu'il atteigne un certain nombre de caractères. Il envelopperait ensuite une DIV de cette position à la fin du texte qui pourrait alors être caché avec la méthode masquine (). Je ne sais pas comment insérer ce texte d'emballage.
Tout autre moyen autour de cela serait également apprécié.
merci.
7 Réponses :
Si vous mettez un gestionnaire d'événement OnKeydown sur la balise du corps, vous pouvez ensuite compter la longueur dans la DIV d'intérêt, puis vous pouvez le masquer lorsque vous avez terminé et supprimer votre gestionnaire d'événements.
Je remplace ma réponse originale avec celui-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>
Votre variable len est un peu suspendu =)
Bonjour, merci mais malheureusement, le texte div contient des balises HTML car je l'obtiens à partir d'une API externe.
Pour autant que je sache, il n'y a que des tags
dans mon texte, y a-t-il un moyen de les ignorer dans votre code? Merci.
Balusc. Yup j'ai vu ça et l'a supprimé. Bonne prise. +1
Le deuxième paramètre à substrateur () est une longueur, pas d'indice fin, je suppose que vous voulez réellement dire que Char.Substr (0, limite).
Substr () ne se soucie pas si la longueur spécifiée est plus longue que la chaîne, donc pour la brièveté, vous pouvez simplement dire $ ("# mydiv"). Texte ($ ("# mydiv"). Texte (). SUBSTR (0, 15));
Excellent! Mais puis-je poser une autre question. J'ai essayé de changer MyDiviv dans une classe et j'applichair à plusieurs divis, mais cela ne fonctionnera pas. J'ai essayé d'utiliser chaque fonction mais cela ne semble pas fonctionner. Une idée de ce que le problème pourrait être?
Ceci cachera une partie du texte
Bonjour merci pour la réponse mais il a le même problème que le code de Jessegavin, les balises HTML ne sont pas ignorées. Donc, parfois la moitié d'une balise apparaît dans la sortie.
Je ne peux pas commenter la réponse de Jessegavin, mais voici le moyen de le faire fonctionner dans plusieurs divs: mettre le code jquery à l'intérieur de ce: $ ("soméclass '). Chaque (fonction () {// code va ici}); et faire le changement: "#mydiv" à cela
très bonne réponse! c'est de quoi j'ai besoin.
Jeff J'avais le même problème voulait ajouter le limiteur de texte à un contenu dynamique, voici 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 pense que le but peut être résolu beaucoup plus facilement que celui expliqué ci-dessus Le code JQuery ci-dessus masquer le texte divisé si elle dépasse 10 caractères ainsi que des annonces ... à la fin pour expliquer qu'il y a quelque chose de plus.
Je suis passée à cela de la réponse, car je n'en ai besoin que d'avoir appliqué si le texte limite le toucher. C'est aussi moins de code. Merci pour cette excellente réponse +1
Ajouter une garniture () pour un texte difficile.
Qu'en est-il du travail avec WordPress? J'ai essayé cette fonction de limiter la classe de l'espace 'rs_rs_name' à 45 caractères, mais cela ne fonctionne pas .. aucune idée? jQuery (fonction () {jQuery (". rs_rs_name"). chacun (fonction (i) {len = $ (this) .text (). Longueur; Si (len> 45) {jQuery (this) .text ($ (ceci) .text (). substr (0,45) + '...');}});});
$.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);
HTML:
25 est maxlength. P>
function limitKeypress(event, value, maxLength) {
if (value !== undefined && value.toString().length >= maxLength) {
event.preventDefault();
}
}
Vous voudrez peut-être regarder les réponses ici .
Ce n'est pas la largeur physique que je veux la limiter, son nombre de caractères.
Vous avez mentionné dans un commentaire ci-dessous que le contenu que vous essayez de limiter peut avoir des balises de texte et de HTML. Ces tags sont-ils normalisés ou avez-vous besoin d'une solution dynamique? Aussi .. Y aura-t-il plusieurs balises enfants avec du texte dans chacun? Je pense que ce sont des facteurs importants.
Je pense que les étiquettes seulement avec le texte seront
Tags.