Limiter un texte dans 1 div et si + afficher un bouton
Résolu
txiki
Messages postés
6596
Date d'inscription
Statut
Contributeur
Dernière intervention
-
codeurh24 Messages postés 760 Date d'inscription Statut Membre Dernière intervention -
codeurh24 Messages postés 760 Date d'inscription Statut Membre Dernière intervention -
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.
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
- Bouton on off ✓ - Forum Loisirs / Divertissements
- Comment faire une capture d'écran sur un samsung sans bouton ? - Guide
- Transcription audio en texte word gratuit - Guide
4 réponses
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.
Merci quand même !
Le bonheur est la seule chose que l'on peut donner sans l'avoir.
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
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
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.
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.
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>
