Comment masquer/afficher plus de texte à l'intérieur d'une certaine longueur (comme youtube)
Je veux avoir un texte pour seulement avoir une certaine quantité de caractères/longueur de la et après que la longueur, je voudrais mettre un lien pour révéler toute la longueur du texte.
Le lien sera (more...)
. Et une fois que l'utilisateur clique sur le lien (more..)
le reste du texte sera de glisser vers le bas.
Comment pourrais-je accomplir?
Heres un exemple.
blah blah blah blah blah (more...)
Lorsque l'utilisateur clique sur (more..)
, il va afficher le texte en entier.
NOTE: je prends un au sujet des données dans une ligne de table/cellule de tableau, pas n'importe quel texte.
- Que signifie le fait que cette question a beaucoup de voix ont à dire, que beaucoup de SORTE que les utilisateurs ne sont pas familiers avec le type de questions qui doivent être posées sur ce site? Vous pouvez la demander aux gens de faire vos devoirs. Vous devez fournir un peu de code pour montrer ce que vous avez fait jusqu'à présent pour résoudre votre problème.
- jquery Raccourcir est bon plug-in pour ce métier jqueryscript.net/text/Read-More-Less-Plugin-jQuery-Shorten.html
Vous devez vous connecter pour publier un commentaire.
Le secret sur cet effet, est pour envelopper les parties que vous souhaitez contrôler avec des balises HTML.
Démo en ligne ici: http://jsfiddle.net/zA23k/215/
Vérifier exemple de travail à http://jsfiddle.net/7Vv8u/4/
Avec Animation http://jsfiddle.net/7Vv8u/5/
Cliquez sur Lire la suite pour agrandir le texte. Cliquez à l'extérieur de la réduire à nouveau.
Je sais que cette question est un peu vieux (et a eu c'est de répondre à déjà sélectionné), mais pour ceux qui veulent une autre option qui vont venir à travers cette question par le biais de Google (comme je l'ai fait), j'ai trouvé ce texte dynamique raccourcisseur:
Dynamiquement Texte abrégé par “Afficher Plus” le lien à l'aide de jQuery
J'ai trouvé que c'était mieux parce que vous pouvez définir la limite de caractères, plutôt que d'supplémentaire s'étend dans le code, ou en définissant une hauteur spécifique à un conteneur.
Espérons que cela aide quelqu'un d'autre!
Si vous avez besoin d'une solution complète, vous pouvez utiliser ceci :
http://jsfiddle.net/7Vv8u/2703/
JS (jQuery)
HTML
CSS
Pour ceux qui veulent juste un simple fichier d'amorce de solution.
Voici un CodePen exemple.
N'oubliez pas d'inclure jquery et bootstrap.min.js dans votre en-tête.
Si vous n'utilisez pas fontawesome icônes, changer
<i class="fa fa-caret-down"></i>
à n'importe quelle icône de votre choix.C'est une autre solution à l'aide cliquable articles (peuvent bien sûr être changé à n'importe quoi).
http://jsfiddle.net/SqJ53/2/
Edit: Si vous voulez utiliser les animations CSS, vous devez utiliser MAX-HAUTEUR au lieu de la HAUTEUR
Javascript
CSS
HTML
Montrer Plus Montrer Moins (Seulement si nécessaire) Pas de JQuery
J'avais besoin de cette fonctionnalité pour un flux RSS sur notre site internet. C'est ce que je suis venu avec:
JS:
CSS:
HTML:
Ici est vraiment une solution simple qui a fonctionné pour moi,
Autant de réponses et tous la bonne, mais je vais proposer à mes propres, il sera peut-être utile pour quelqu'un.
Nous avons le code HTML dans le template:
JS fonction de basculement qui:
Vous pouvez utiliser comme cette
HTML
CSS
jQuery
Mise à jour @Hussein solution avec un aperçu de la hauteur qui va s'adapter au paragraphe nombre de lignes.
Donc, avec ce morceau de code :
- Vous pouvez choisir le nombre de lignes que vous souhaitez afficher dans l'aperçu, ça fonctionne pour toutes les tailles d'écran, même si la taille de police est sensible.
- Il n'est pas nécessaire d'ajouter des classes ou de back-end de l'édition de séparer aperçu de tout le contenu.
http://jsfiddle.net/7Vv8u/5816/