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

Résolu/Fermé

txiki Messages postés 6596 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 760 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
Comment retranscrire un entretien audio en texte - Guide
Comment encadrer un texte sur word - Guide

4 réponses

Réponse 1 / 4

txiki Messages postés 6596 Date d'inscription mercredi 30 janvier 2002 Statut Contributeur Dernière intervention 22 février 2024 519
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 760 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 6596 Date d'inscription mercredi 30 janvier 2002 Statut Contributeur Dernière intervention 22 février 2024 519
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 760 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

copie de texte

Excel si cellule contient texte alors...

Excel formule : savoir si une cellule contient partie texte

Cellules en surbrillance selon une TextBox

Excel : si ma cellule contient tel texte ou tel texte