sortie de base de données abbreviate avec jquery

Question

Je cherche un moyen de limiter la quantité de caractères affichés dans un en-tête en utilisant jquery. Essentiellement le titre est récupéré à partir de la base de données, mais je veux seulement que les résultats s'affichent sur une ligne d'une largeur définie afin de limiter la sortie ou l'abréger pour empêcher les images ci-dessous d'être poussées trop loin.

Le Live example suivant devrait montrer tout ce que je veux dire, faites défiler vers le bas un peu et vous verrez des titres d'images qui sont 2 ou 3 lignes.

Espérons que quelqu'un peut aider !!!!

Answer 1

Taillez avec PHP fonctionnerait, comme l'a dit T. Stone, mais vous auriez à savoir si vous voulez couper l'extrémité avant un titre ou l'arrière-plan. Lots of examples. J'utilise trim avec des titres sur mon propre site wordpress. Cela coupe les 13 premiers caractères d'un titre de poste, à la place de the_title.

<?php $mytitle = get_the_title(); $mytitle = substr($mytitle,13); echo $mytitle; ?>

Answer 2

Dan, je suis un peu confus à propos de ce que vous cherchez, mais il semble que vous vouliez du code pour tronquer la longueur d'un certain champ. J'ai remarqué que vous avez étiqueté cette question PHP - il serait probablement préférable de le gérer côté serveur. Cependant, si vous utilisez Jquery, il existe probablement un moyen facile de le faire. L'élément clé à comprendre est, quel schéma allez-vous utiliser pour identifier les balises de champ dans la page (c'est-à-dire quel type de sélecteur de jquery écrivez-vous pour sélectionner les balises que vous voulez)? Une fois que c'est en panne, la fonction .slice() de javascript atteindra ce que vous voulez.

Voici donc un exemple. En fonction de la page que vous avez liée, je vais dire que nous pourrions sélectionner votre sortie de champ en sélectionnant n'importe quelle balise span qui est un enfant direct d'une balise d'ancrage qui est un enfant direct d'un élément de liste. Puis, à partir de là, nous pouvons saisir le contenu de la travée, vérifier la largeur et tronquer si nécessaire.

(non testé, mais donne l'idée)

<script type="text/javascript"> 

    var MAX_TITLE_LENGTH = 75; 

    // on page load... 
    $(function() { 
     truncateImageTitles();  
    }); 

    function truncateImageTitles() { 
     $('li > a > span').each(
      if (this.text().length > MAX_TITLE_LENGTH) 
       this.text(this.text().slice(0,MAX_TITLE_LENGTH)); 
     ); 
    } 

</script>