Discussion :

[wwilly17]

bonjour,
je me permet de poster ce message suite à un petit problème css .
sur ma page principale et via jquery j aoute des éléments ( cf cf-ci desous )

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
sout+='<div class="Devt_class" id="evt_'+data[k]['id']+'">'
sout+='<div style="display:inline-block;vertical-align:middle;"><a href="#D'+data[k]['id']+'" id="A_detail_evt"><img src="images/add_16.png"></a></div>'
sout+='<div style="display:inline-block;" id="Dtitre"><label>'+data[k]['titre']+'</label></div>'
sout='</div>';
 
$("#"+data[k]['id_categorie']+"-jour").append(sout)

voici le fichier css correspondant à la classe "Devt_class"

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
.Devt_class
{
overflow-x:hidden;
text-overflow:ellipsis;
display:inline-block;
width:38;
height:17px;
background:#aef4e4;
border-right:1px black solid;
z-index:2;
margin-top:10px;
font-size:8pt;
line-height:17px;
 
}

mon souci est le suivant, si le titre du div Dtitre est trop grand je voudrais le couper et mettre 3 petits points ex : test...
j ai donc indique la commande overflow-x:hidden et text-overflow:ellipsis dans mon css, seul hic c est que si le text est trop grand
il ne me l affiche pas du tout au lieu de me le couper ..

auriez vous une solution ?
merci d avance

[Invité]

Bonjour,

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

width:38;

38 quoi ?

Au minimum :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
width:250px; /* à adapter*/

[wwilly17]

une erreur...
il faut lire :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
width:38px

[wwilly17]

J ai essaye le code CSS donné mais cela ne fonctionne pas .
au lieu de m' afficher le début du titre il ne m affiche que les "...."

une idée ?

[Invité]

Pas très étonnant avec une largeur de 38px...





[(]
N.B. Je déteste qu'on écrive : "une idée ?"
... surtout quand on ne pense même pas à (re)donner le code.
... PIRE ! quand on se contente d'ajouter : "cela ne fonctionne pas" !

Du coup, je préfère ne pas dire la première idée qui me vient à l'esprit..............
[/)]

[Jacques Beauregard]

Bonjour,

@Jreaux

J ai essaye le code CSS donné mais cela ne fonctionne pas .

Je pense donc qu'il a essayé avec 250px.

@Jreaux

N.B. Je déteste qu'on écrive : "une idée ?"
... surtout quand on ne pense même pas à (re)donner le code.
... PIRE ! quand on se contente d'ajouter : "cela ne fonctionne pas" !

[wwilly17]

A titre d information vu que la largeur pose apparemment problème. .sachez que la largeur est réadapter via jquery quelques ligne plus loin ds mon code ..
De plus au vu des options indiqué je ne vois pas en quoi la largeur pourrait poser problème. ..

[Invité]

Tu ne nous montres toujours pas ton code......

[wwilly17]

voici la partie complete du code qui crée et affiche la div en question

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
for (var k in data) {

    var sout = '';
    sout = '<div style="display:block;heith=20px;">';
    var idebut = parseInt(data[k]['zrdebut']);
    var ifin = parseInt(data[k]['zrfin'])


    var vflag = 0;
    var nbjour = 0;
    for (var x = 1; x <= 25; x++) {
        var vvdate = (dtdebut.getDate().toString().length == 1) ? '0' + dtdebut.getDate() : dtdebut.getDate();
        var vvmois = ((dtdebut.getMonth() + 1).toString().length == 1) ? '0' + (dtdebut.getMonth() + 1) : (dtdebut.getMonth() + 1);
        var idjour = vvdate + '' + vvmois + '' + dtdebut.getFullYear();
        var zidjour = dtdebut.getFullYear() + '' + vvmois + '' + vvdate;

        if ((parseInt(zidjour) >= idebut) && (parseInt(zidjour) <= ifin)) {

            if (vflag == 0) {
                sout += '<div class="Devt_class" id="evt_' + data[k]['id'] + '">'
                sout += '<div style="display:inline-block;vertical-align:middle;"><a href="#D' + data[k]['id'] + '" id="A_detail_evt"><img src="images/add_16.png"></a></div>'
                sout += '<div style="display:inline-block;" title="' + data[k]['titre'] + '"><label>' + data[k]['titre'] + '</label></div>'

                sout += '<div id="D' + data[k]['id'] + '" class="modalDialog">'
                sout += '	<div>'
                sout += '		<a href="#close" id="close_evt" title="Close" class="close">X</a>'
                sout += '		<h2>Evenement : ' + data[k]['titre'] + '</h2>'
                sout += '			<p>Catégorie : ' + data[k]['categorie'] + '</p>'
                sout += '			<p>Du ' + data[k]['ddebut'] + ' au ' + data[k]['dfin'] + '</p>'
                sout += '			<p><fieldset><legend>Description :</legend> <article>' + data[k]['desc'] + '</article></fieldset></p>'
                sout += '			<p>Lieu : ' + data[k]['lieu'] + '</p>'
                sout += '			<p>Leader : ' + data[k]['leader'] + '</p>'
                sout += '<input type=hidden id="id_evt" value="' + data[k]['id'] + '"/>'
                sout += '<input type=hidden id="titre" value="' + data[k]['titre'] + '"/>'
                sout += '<input type=hidden id="ddebut" value="' + data[k]['ddebut'] + '"/>'
                sout += '<input type=hidden id="dfin" value="' + data[k]['dfin'] + '"/>'
                sout += '<input type=hidden id="desc" value="' + data[k]['desc'] + '"/>'
                sout += '<input type=hidden id="piece_jointe" value="' + data[k]['piece_jointe'] + '"/>'
                sout += '<input type=hidden id="lieu" value="' + data[k]['lieu'] + '"/>'
                sout += '<input type=hidden id="id_categorie" value="' + data[k]['id_categorie'] + '"/>'
                sout += '<input type=hidden id="leader" value="' + data[k]['leader'] + '"/>'

                if (data[k]['piece_jointe'] != 'X') {
                    sout += '			<p>Pièce jointe : <a href="upload/' + data[k]['piece_jointe'] + '" target=_blank>' + data[k]['piece_jointe'] + '</a></p>'
                }
                //menu
                sout += '<div style="display:block">'
                for (var m in data[k]['menu']) {
                    sout += '	<div style="display:inline-block">'
                    sout += '				<button class="btn_evt" id="' + data[k]['menu'][m]['btn'] + '" style="display:block">' + data[k]['menu'][m]['libelle'] + '</button>'
                    sout += '</div>'


                }

                sout += "</div>"
                sout += '</div>'
                sout += '	</div>'
                sout += '</div>';
                vflag = 1;
                nbjour += 1;
            } else {
                //sout+='<div style="display:inline-block;width:38;height:15px;background:#aef4e4;border-right:1px black solid;z-index:2;margin-top:10px"> </div>';
                nbjour += 1;

            }
        } else if (parseInt(zidjour) < idebut) {
            sout += '<div style="display:inline-block;width:38;height:10px;border-right:1px black solid;z-index:2;margin-top:10px"></div>';
        } else if (parseInt(zidjour) > ifin) {
            sout += '<div style="display:inline-block;width:38;height:10px;border-right:1px black solid;z-index:2;margin-top:10px"></div>';

        }

        dtdebut.setDate(dtdebut.getDate() + 1)
    }

    sout += '</div>';
    sout += '</td>';
    sout += '</tr>';
    sout += '</table>';

    sout += "</div>";
    //alert(sout)
    $("#" + data[k]['id_categorie'] + "-jour").append(sout)
    var vtaille = 0
    vtaille = nbjour * 39;
    $("#evt_" + data[k]['id']).css("width", vtaille) //div de l' evenement crée dont on modifie la taille 
    dtdebut.setDate(dtdebut.getDate() - 25)
}

voici tout le code ..en rouge les parties les plus interessantes ..

[NoSmoking]

Bonjour,
le code généré aurait été bien mieux !

Il faut mettre cette propriété sur le conteneur du texte qui risque de dépasser et non sur un "grand-parent" ce qui semble bien être ton cas.

[hippo206]

ton problème est la largeur définie trop petite . Crée une varaible d'ajustement

[NoSmoking]

Et en quoi le problème sera résolu si l'on n’applique pas la propriété au parent direct du texte.?

On peut espérer que wwilly17 nous tienne au courant

[wwilly17]

Alors j'ai effectué les deux test ..mettre le code au div concerne ou le mettre au parent..le résultat est le même. .cela ne fonctionne pas...

[NoSmoking]

cela ne fonctionne pas...

nous voilà bien avancé avec une telle description du dysfonctionnement

---

Considérons les 2 structure suivantes

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<p class="ellipsis">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum et efficitur orci, a aliquam odio.
</p>

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<div class="ellipsis">
    <p class="ellipsis">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum et efficitur orci, a aliquam odio.
    </p>
</div>

...en déclarant le code CSS de la classe ellipsis suivante

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
.ellipsis {
  overflow:hidden;        /* masque les débordements */
  text-overflow:ellipsis; /* application du type d'overflow */
  white-space:nowrap;     /* pas de passage à la ligne */
  width:25em;             /* à adapter au besoin */
}

seul le premier exemple fonctionnera et devrait ressembler à Lorem ipsum dolor sit amet, consectetur adipiscing ...