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

thieu · 18 Octobre 2006

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 !

<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 quelqu'un y arrive....

ajpg · 18 Octobre 2006

Salut,

Le première idée qui me vient à l'esprit serait d'entourer le texte d'un balisage <p></p> en float right.

thieu · 19 Octobre 2006

Désolé ta solution fait toujours disparaitre les caractères de droites et non ceux de gauche. J'ai un exemple plus concret utilisant du javascript (compatible IE pour le moment), elle fonctionne comme je le voudrais avec une solution 100% CSS. Voir ci-dessous

Pour tester , redimenssionne ta fenêtre, le texte est bien aligné à droite et quand la zone est trop petite, il faut que ce soit les caractères de gauche qui disparaissent

TON EXEMPLE (Caractère disparaissent à droite)


<STYLE>
.HideLeftOverflow{
width:80%;
text-align:right;
border:1px dotted black;
white-space:nowrap;
overflow:hidden;
}
.HideLeftOverflow P{
float:right;
}
</STYLE>
<DIV CLASS="HideLeftOverflow"><p>Mon texte Mon texte Mon texte Mon texte Mon texte </p></DIV>

UN EXEMPLE UTILISANT DU JAVASCRIPT (Caractère disparaissent à gauche)



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

Modifié 19 Octobre 2006 par thieu

ajpg · 19 Octobre 2006

Mon idée (plutôt spontanée que réfléchie) fonctionne au moins avec Firefox (testé avec la version 1.5)

Il faudrait peut-être plutôt regarder du côté de la propriété direction que de text-align. D'après CSS2, cette propriété direction spécifie notamment « le sens du débordement horizontal » (ce que tu souhaites donc).

Je n'avais jamais utilisé cette propriété, mais d'après un rapide essai, on obtient facilement ce que tu souhaites avec IE et Opera, en revanche ça ne le fait pas vraiment avec Firefox...

Sinon il serait toujours possible d'utiliser le positionnement relatif (pour DIV) et absolu (pour P, avec right: 0), mais ça n'est pas très pratique. Cela oblige par exemple à spécifier la hauteur du DIV

Modifié 19 Octobre 2006 par ajpg

thieu · 19 Octobre 2006

Autant pour moi ! La méthode proposé ci-dessus fonctionne si je fait du relatif. Avec IE le débordement de gauche disparait quand je diminue la taille de la fenêtre. Par contre, je n'ai effet pas réussi à le rendre compatible Mozilla, même en utilisant du texte-align


<style>
.link{
text-decoration:none;
display:block;
}
.link:hover{
text-decoration:underline
}
.divleft{
cursor:hand;		[color="#999999"]/*Curseur "Main" sur le texte de gauche*/[/color]
position:absolute;
white-space:nowrap;
width:58%;		[color="#999999"]/*Seulement 58% du texte s'affiche*/[/color]
overflow:hidden;
z-index:2;			[color="#999999"]/*Le texte de gauche s'affiche au dessus du texte de droite*/[/color]
background-color:#FFFFFF;	[color="#999999"]/*Permet de masque le texte de droite qui est en dessous du texte de gauche*/[/color]
display:block;

}
.divright{
cursor:hand;		[color="#999999"]/*Curseur "Main" sur le texte de droite*/[/color]
z-index:1;			[color="#999999"]/*Permet de placer le texte de droite en dessous du texte de gauche*/[/color]
position: relative;
overflow: hidden;
width: 100%;
height: 20px;
display:block
}

[color="#999999"]/*le SPAN permet de faire glisser le texte de droite vers la gauche si le conteneur est trop petit*/[/color]
.divright SPAN{
position: absolute;
right: 0px;
white-space:nowrap;
}
[color="#999999"]/*le P permet de laisser le texte de droite collé à gauche quand le conteneur est plus grand que le texte*/[/color]
.divright SPAN P{
left: 0px;
width:100%;
margin:0px;
}
[color="#999999"]/*L'ellipsis se place au milieu, c'est à dire à droite du texte de gauche qui s'affiche à 58% de la largeur*/[/color]
.divmiddle{
z-index:3;
position: absolute;
background-color:#FFFFFF;
right:0;
font-weight:bold;
padding:0 2 0 2
}

</style>

[color="#999999"]<!--le lien contient 2 x le texte, une fois pour la partie gauche, une fois pour la partie droite avec un ellipsis au milieu-->[/color]
<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>
[color="#999999"]//masque ou affiche le texte de droite + ellipsis si le conteneur est suffisement grand pour tout afficher[/color]
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>

Si j'arrive à faire le truc du haut avec mozilla, j'arriverais également à rendre ce code compatible. Je continue de chercher mais si vous avez une idée : donnez donnez!!

ajpg · 19 Octobre 2006

Le premier code me donne le même résultat avec Firefox et IE.

Pour le reste, je trouve que c'est beaucoup de contorsions pour pas grand chose...

Tu peux éventuellement regarder la propriété text-overflow (c'est du CSS3, mais déjà plus ou moins bien implémenté). Cf : http://www.css3.info/preview/text-overflow.html

Modifié 19 Octobre 2006 par ajpg

thieu · 20 Octobre 2006

Malheureusement le CSS3 n'est pas implémenté sur les navigateurs qui m'interessent...

Je comprend ta remarque mais ce besoin d'ellipsis au milieu est important parce qu'il servira sur un site eCommerce d'Alcatel (https://www.businesspartner.alcatel.com) pour afficher, dans un cas de figure particulier, des listes de produits sous forme de colonnes de liens ou des types de document pour les informations marketing. Or l'ellipsis au milieu permet d'identifier le début et la fin du terme ce qui le rend plus compréhensible, de plus le TITLE du lien permet d'afficher le texte au complet, et enfin sur un extranet on peux se permettre de limiter le nombre de navigateur, dans mon cas : Firefox v1.5 & IE6. Je doit donc trouver une solution qui fonctionne dès maintenant pour ces navigateurs. En fait je l'ai déjà réalisé en 100% Javascript mais je cherche à faire moins lourd et plus fiable. Dès que je trouve, je le post ici !

thieu · 20 Octobre 2006

J'ai trouvé la solution (sans doctype!) compatible mozilla + IE.... A vous de tester, si vous avez mieux (sans doctype svp) je suis prenneur.

1) La solution du topic :



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


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

Compatible FirefoxV1.5 + et IE6+ (j'ai pas besoin de plus)

Modifié 20 Octobre 2006 par thieu

virg · 25 Mars 2009

Bonjour,

la réponse est un peu tardive, mais elle servira peut-être à d'autres

il suffit d'utiliser le style direction (http://fr.selfhtml.org/css/proprietes/positionnement.htm) et le problème sera résolu je pense

bonne continuation

Virg

Connexion

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

Sujets conseillés

thieu

ajpg

thieu

ajpg

thieu

ajpg

thieu

thieu

virg

Veuillez vous connecter pour commenter

Parcourir

Activité