Création d'un "Overflow:Hidden" sur la gauche
J'ai besoin de créer un overflow:hidden agissant sur la gauche du DIV et non sur la droite. Mon objectif est d'aligner du texte ou image sur la droite d'un DIV et effacer automatiquement le contenu qui déborde sur la gauche. Contrainte supplémentaire : ne pas utiliser de "clip:rect(...)", pourquoi ? parce que que mon DIV parent doit avoir une taille relative (80%) et donc le contenu qui dépasse doit se réajuster automatiquement quand la fenêtre change de taille: or un clip:rect(...) n'accepte que des valeurs absolues, donc ça ne marche que si mon div à une largeur fixe.
Bref, j'aimerais faire ce que fait le code suivant, mais sur la gauche !
Code:
1
2
3
4
5
6
7
8
9
10
| <STYLE>
.HideLeftOverflow{
width:80%;
text-align:right;
border:1px dotted black;
white-space:nowrap;
overflow:hidden;
}
</STYLE>
<DIV CLASS="HideLeftOverflow">Mon texte Mon texte Mon texte Mon texte Mon texte </DIV> |
une idée ? j'ai tout tenté ... un vrai défi ! Et surtout des perspectives énorme si c'est possible....
Désolé, c'est pas ça. Volà un exemple concret
Nous ne nous sommes pas compris, l'exemple que tu propose fonctionne mais n'est pas redimenssioble dynamiquement, c'est là le challenge.
Voilà une solution utilisant du javascript (compatible IE pour le moment), elle fonctionne très bien mais je cherche une solution 100% CSS.
Pour tester : redimenssionne ta fenêtre IE, le texte restera aligné à droite mais quand la zone est trop petite, c'est les caractères de gauche qui disparaissent dynamiquement. Comme si je faisait un Overflow: hidden sur la gauche. Je suis presque sur qu'il est possible de le faire en CSS uniquement en imbriquant des balises et en jouant sur le left avec un pourcentage
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
|
<style>
.conteneur{
width:80%;
border:1px dotted black;
display:block;
overflow:hidden;
text-align:right
}
.HideLeftOverflow{
display:block;
white-space:nowrap;
width:100%;
position:relative;
}
</style>
<div class="conteneur" id=conteneur>
<div class="HideLeftOverflow" id=HideLeftOverflow >
mon texte mon texte mon texte fin de ligne !!!
mon texte fin de ligne !!!
</div>
</div>
<script>
window.onresize=function(){
objF=document.getElementById("HideLeftOverflow")
objP=document.getElementById("conteneur")
if (objF && objP) objF.style.left=objP.clientWidth-objF.clientWidth
}
</script> |
aaah mais oui.... tu a raison
Tu avais raison, ça marche impec, j'avais testé après ton dernier post...
Mais comment le rendre compatible mozilla ? .
Voilà la raison de tout ça : il s'agit de créer un lien dont le texte se réduit avec un ellipsis (="...") au milieu si la taille du conteneur est trop petit. Ceci permettrait d'afficher des colonnes de liens dont la taille du texte s'adapterait au conteneur : un superbe moyen d'afficher plusieurs colonnes de lien cote à cote sans élargir le cadre maximum du site.
Ci-dessous une solution qui marche pour IE (grace à toi quand même), ce qui m'em...rde c'est la présence de JS et que le code n'est pas compatible. Je continue à chercher, quand je trouve, je le post ici !
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
|
<style>
.link{
text-decoration:none;
display:block;
}
.link:hover{
text-decoration:underline
}
.divleft{
cursor:hand; /*Curseur "Main" sur le texte de gauche*/
position:absolute;
white-space:nowrap;
width:58%; /*Seulement 58% du texte s'affiche*/
overflow:hidden;
z-index:2; /*Le texte de gauche s'affiche au dessus du texte de droite*/
background-color:#FFFFFF; /*Permet de masque le texte de droite qui est en dessous du texte de gauche*/
display:block;
}
.divright{
cursor:hand; /*Curseur "Main" sur le texte de droite*/
z-index:1; /*Permet de placer le texte de droite en dessous du texte de gauche*/
position: relative;
overflow: hidden;
width: 100%;
height: 20px;
display:block
}
/*le SPAN permet de faire glisser le texte de droite vers la gauche si le conteneur est trop petit*/
.divright SPAN{
position: absolute;
right: 0px;
white-space:nowrap;
}
/*le P permet de laisser le texte de droite collé à gauche quand le conteneur est plus grand que le texte*/
.divright SPAN P{
left: 0px;
width:100%;
margin:0px;
}
/*L'ellipsis se place au milieu, c'est à dire à droite du texte de gauche qui s'affiche à 58% de la largeur*/
.divmiddle{
z-index:3;
position: absolute;
background-color:#FFFFFF;
right:0;
font-weight:bold;
padding:0 2 0 2
}
</style>
<!--le lien contie nt 2 x le texte, une fois pour la partie gauche, une fois pour la partie droite avec un ellipsis au milieu-->
<div style="width:80%;border:1px dotted green;">
<a href="test" class="link" title="Ceci est un long texte qui doit se raccourcir">
<span class="divleft" id="div3"><span class="divmiddle">...</span>Ceci est un long texte qui doit se raccourcir</span>
<span class="divright" id="div1"><span id="div2"><p>Ceci est un long texte qui doit se raccourcir</p></span></span>
</a>
</div>
<script>
//masque ou affiche le texte de droite + ellipsis si le conteneur est suffisement grand pour tout afficher
window.onload=window.onresize=function(){
obj1=document.getElementById("div1")
obj2=document.getElementById("div2")
obj3=document.getElementById("div3")
if (obj1 && obj2 && obj3) obj3.style.visibility=(obj2.clientWidth==obj1.clientWidth ? "hidden" : "visible")
}
</script> |
