Limiter un texte dans 1 div et si + afficher un bouton

Résolu/Fermé

txiki Messages postés 6597 Date d'inscription mercredi 30 janvier 2002 Statut Contributeur Dernière intervention 22 février 2024 - 8 avril 2015 à 15:54
codeurh24 Messages postés 761 Date d'inscription samedi 29 mars 2014 Statut Membre Dernière intervention 8 septembre 2018 - 13 avril 2015 à 13:23

Bonjour,
Le suis en train de faire un css pour un tableau. Ce tableau comporte 2 colonnes et 4 lignes limitées en hauteur et possédant un icone selon le type d'infos a afficher (Actus, Projet etc....)
Jusqu'ici c'est OK.
Le problème est qu'on doit limiter le texte dans chaque cellule à 3 lignes (ou x caractères) et si plus on affiche un bouton + pour ouvrir un div contenant le texte complet.
Je ne maitrise pas suffisament le javascript mais je pense que saurais par contre l'adapter à mes besoins.
Quelqu'un pourrait-il m'aider ?
Merci infiniment par avance.

Le bonheur est la seule chose que l'on peut donner sans l'avoir.

A voir également:

Limiter un texte dans 1 div et si + afficher un bouton
Excel cellule couleur si condition texte - Guide
Mettre un texte en majuscule - Guide
Déflouter un texte - Forum Logiciels
Comment retranscrire un entretien audio en texte - Guide
Bouton on off ✓ - Forum Loisirs / Divertissements

4 réponses

Réponse 1 / 4

txiki Messages postés 6597 Date d'inscription mercredi 30 janvier 2002 Statut Contributeur Dernière intervention 22 février 2024 515
11 avril 2015 à 02:15

Alors personne pour un petit coup de pouce ?
Merci quand même !

Le bonheur est la seule chose que l'on peut donner sans l'avoir.

Réponse 2 / 4

codeurh24 Messages postés 761 Date d'inscription samedi 29 mars 2014 Statut Membre Dernière intervention 8 septembre 2018 123
11 avril 2015 à 12:48

Bonjour, ce code peut t'aider a avancer dans ton probleme.

J'ai pas le temps de le continuer ce weekend.
il n'est pas fini et a plein de chose a améliorer mais les bases sont là

http://wiki.lionzone.fr/index.php?title=Limiter_texte_dans_une_div

Réponse 3 / 4

txiki Messages postés 6597 Date d'inscription mercredi 30 janvier 2002 Statut Contributeur Dernière intervention 22 février 2024 515
11 avril 2015 à 15:58

Bonjour codeurh24,
Merci déja pour ce code. Ce n'est pas tout a fait ce que je recherche à savoir que le div editeur1 s'allonge si on met plus de 120 caractères (bien qu'il affiche le bouton).
Le div editeur2, lui, supprime le début pour n'afficher que les dernieres lignes (paragraphe de Lorem ipsum en locurence) et n'affiche pas le bouton pour afficher le texte complet.
Mais c'est un déébut.
Merci beaucoup en tous cas ! Je continue de chercher.

Le bonheur est la seule chose que l'on peut donner sans l'avoir.

Réponse 4 / 4

codeurh24 Messages postés 761 Date d'inscription samedi 29 mars 2014 Statut Membre Dernière intervention 8 septembre 2018 123
13 avril 2015 à 13:23

Es ce que ce code là te convient ?



<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>test</title>
  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>

  <style>
		body{
			background-color: #777;
			font-size: 25px;
			line-height:25px;
			letter-spacing:10px;
		}
		
		.editeurColor{
			background-color: #DDD;
			width:100px;
			min-height: 100px;
		}
		
		#editeur3{
			overflow:hidden;
			width:100px;
			height: 100px;
			
		}
		
		/* pour firefox*/
		div{
			word-wrap: break-word;
		}
		
		.popup{
				position: absolute;
				width: 50%;
				height: 90%;
				border: 1px solid #777;
				box-shadow: 0px 0px 10px 0px #000; 
				background-color: #FFF;
				overflow-x: hidden;
				overflow-y: auto;
				font-size: none;
				line-height:none;
				letter-spacing:none;
			
		}
		
		.popup-fond{
				position: absolute;
				width: 100%;
				height: 100%;
				background-color: rgba(0,0,0,0.4);
		}
		
  </style>
  <script>


		var popup = function(id){
			
			var contenu = $("#"+id).text();
			
			$("body").prepend( '<div class="popup-fond" onclick="$(this).remove();$(\'.popup\').remove();"></div><div class="popup"><co'+'de>'+contenu+'</co'+'de></div>' );
		}

		var scrollUp = function(){

			$("#editeur3").scrollTop(0)
			$("#editeur3").blur();

		}
  
		$(document).ready(function(){
			window.boutonAjouter = false;
			
			
			setInterval(function(){ 

				var nbrLettres = $("#editeur3").text();
				nbrLettres = nbrLettres.length;
				
				if( nbrLettres > 0 ){
					$("#debug3").text(nbrLettres);
				}else{
					$("#debug3").text('texte limité a 16 caracteres');
					$("input").remove();
					window.boutonAjouter = false;
				}
				
				if( nbrLettres > 16 && window.boutonAjouter == false){
					$("body").append( '<input type="submit" value="Voir tout" onclick="popup(\'editeur3\')" />' );
					$("body").append( '<br/><input type="submit" value="Texte Ok" onclick="scrollUp()" />' );
					window.boutonAjouter = true;
				}
				
			}, 200);
			
			$("#editeur3").change(function(){
				scrollUp();
			})


			
		});
  </script>
</head>
<body>
 

<div id="debug3">texte limité a 16 caracteres</div>
<div id="editeur3" class="editeurColor"  contenteditable="true"></div>
 
</body>
</html>

Discussions similaires

Trouver le mot réellement écrit en lettres capitales PIX

programme qui n'affiche pas le mot secret

Formule Excel : "SI" une cellule contient un mot, alors ?

copie de texte

Excel si cellule contient texte alors...

Discussions similaires

Newsletters