Création d'un "Overflow:Hidden" sur la gauche

**thieug** · 18/10/2006, 16h46

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 :

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

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

**MasterOfChakhaL** · 18/10/2006, 18h54

Salut,

Essaye cela:

Code html :

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
<html>
	<head>
		<style>
                        #container {
                                position: relative;
                                overflow: hidden;
 
                                /* ceci sert juste à mettre en évidence le truc */
                                margin: 200px;
                                border: 1px solid red;
                                width: 200px;
                                height: 200px;
                        }
 
                        .overflowleft {
                                position: absolute;
                                right: 0;
                        
                        
                        }
                </style>
	</head>
	<body>
 
		<div id="container">
			<div class="overflowleft">
				aaaaaaaaaazzzzzzzzzzzeeeeeeeeeeeerrrrrrrrrttttttttttyyyyyyyyy
			</div>
		</div>
	</body>
</html>

...testé avec ie 6 et opera 9

**thieug** · 19/10/2006, 10h30

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 :

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

**MasterOfChakhaL** · 19/10/2006, 10h48

mmmh, je pense que j'avais bien cerné ce que tu voulais....

Tu veux une taille dynamique pour le conteneur.. ok, mets des pourcentages sur mon exemple. Ca marche aussi...
Le seul truc qui manque, c'est le "white-space:nowrap";

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#container {
				position: relative;
				overflow: hidden;
 
				/* ceci sert juste à mettre en évidence le truc */
				margin: 200px;
				border: 1px solid red;
				width: 50%;
				height: 200px;
			}
 
			.overflowleft {
				position: absolute;
				right: 0;
				white-space:nowrap;

Ce css s'appuie sur le squelette html de mon premier post...

T'aurais quand même pu essayer...

**JackBeauregard** · 19/10/2006, 14h27

En quoi cela ouvre-t'il des perspectives énormes ?

**thieug** · 20/10/2006, 09h45

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 :

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

**thieug** · 20/10/2006, 14h02

J'ai trouvé la solution (sans doctype!) Compatible FirefoxV1.5 + et IE6+ (j'ai pas besoin de plus) .... A vous de tester, si vous avez mieux (sans doctype svp) je suis prenneur.

1) La solution du topic :

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
 
 
<style>
.container{
	WIDTH: 80%; 
	BORDER:1px dotted blue; 
}
 
.overflowleft {
position: relative;
overflow: hidden;
width: 100%;
height: 20px;
display:block;
white-space:nowrap
}
.overflowleft div {
position:absolute;
right:0px;
}
 
/*Compatibilité Mozilla */
.overflowleft[CLASS] div
{
width:100%;
display:table;
text-align:right
}
</style>
 
 
<div class="container">
	<div class="overflowleft">
		<div>mon texte mon texte mon texte mon texte mon texte mon texte</div>
	</div>
</div>

2) La solution de mon problème principal : (ellipsis automatique au milieu d'un lien), quoi que je cherche à faire mieux parce qu'il y a encore un peu de JS.

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
90
91
92
 
<style>
 
.container{
width:80%;
padding:3px;
border:1px dotted blue;
}
.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 #div1{
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{
width:100%;
margin:0px;
left: 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:0px 2px 0px 2px
}
 
 
/*Compatibilité Mozilla */
.divright #div1[ID]
{
width:100%;
display:table;
}
.divleft[CLASS]{
width:40%; 
}
</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 class=container>
 
	<a href="test" class="link" title="Ceci est un long texte qui doit se raccourcir">
		<span class="divleft" id="div2"><span class="divmiddle">...</span>Ceci est un long texte qui doit se raccourcir</span>
		<span class="divright" ><span id="div1"><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")
if (obj1 && obj2) obj2.style.visibility=( obj1.offsetLeft>=-10 ? "hidden" : "visible")
}
</script>

Création d'un "Overflow:Hidden" sur la gauche

CSS

Discussions similaires

Partager

Partager