text-overflow non pris en compte

Version imprimable

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:

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:

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

Bonjour,

Code:

width:38;

38 quoi ? :koi:

Au minimum :
Code:

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

18/11/2015, 11h51
wwilly17
une erreur...
il faut lire :
Code:

1 2 width:38px
18/11/2015, 14h40
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 ?
18/11/2015, 15h11
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..............
[/)]
18/11/2015, 16h33
Jacques Beauregard

Bonjour,

@Jreaux

Citation:

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

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

@Jreaux

Citation:

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" !

:plusser:
18/11/2015, 17h27
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. ..
18/11/2015, 19h28
Invité

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

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

Code:

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 ..

21/11/2015, 16h58
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.
27/11/2015, 08h24
hippo206

ton problème est la largeur définie trop petite . Crée une varaible d'ajustement
28/11/2015, 15h24
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 :D
28/11/2015, 15h35
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...

Citation:

cela ne fonctionne pas...

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

Considérons les 2 structure suivantes
Code:

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

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:

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 ...