[RESOLU] 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 !

<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....
Modifié par thieu (23 Oct 2006 - 09:02)

Bonjour et bienvenue parmi nous

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle.

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation

bonjour,

Il est possible d'obtenir quelque chose de tres approchant sur cette base avec un doctype valide.

<div id="conteneur">
	<div class="HideLeftOverflow">
		<p>mon texte mon texte mon texte  fin de ligne !!! 
  mon texte mon texte mon texte  mon texte mon texte mon texte fin de ligne!!!
  mon texte mon texte mon texte  mon fin de ligne !!! 
 texte mon texte mon texte  mon texte mon texte mon texte  mon texte mon texte mon texte  mon texte mon texte mon texte 

!!!
		</p>
	</div>
</div>

mais peut-etre y'a t-il deja trop de balise ?

++

L'imbrication de balise n'est pas un problème, il faut juste que ça marche, quelque soit le nombre de balise.

Voilà une solution utilisant du javascript (compatible IE pour le moment), elle fonctionne très bien mais je cherche une solution 100% CSS.

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

Pour tester : redimenssionnez votre fenêtre, le texte est bien aligné à droite et quand la zone est trop petite, c'est bien les caractères de gauche qui disparaissent

bonjour,

je viens de tester le js , et ça ne passe effectivement pas dans Firefox et bug quelque peu dans IE , le texte deborde , mais c'est une base .

pour la solution "css" , en partant du principe qu'une page html peut-etre affiché de gauche a droite ou vice versa , que l'on peut a l'aide de <bdo dir="rtl" > inverser l'affichage des caracteres , il semble donc possible de reproduire en partie le comportement recherché dans une zone de la page.

un conteneur ,
un sous conteneur dans lequel on inverse le flux d'affichage (resultat differents d'un navigateurs a l'autre , scroll bar a droite ou a gauche )
puis le contenu que l'on remet dans le flux d'affichage normale afin d'assurer un comportement assez stable dans les differents navigateurs (l'heritage css de "unicode-bidi:bidi-overide;" peut provoquer des bugs d'affichage , je crois que l'heritage de cette attributs/valeur ne devrait pas etre transmis , pas sur ).

une petite page test :
http://gcyrillus.free.fr/trucs_css/text_align_droite_hidden_gauche.html

testé avec IE6 , IE7 , Opera 8.5 , firefox et mozilla ... pour les autres , a vous le "forum" pour les retours .

++


<edit> le css a joindre au code html de mon post precedent :

<style type="text/css">
#conteneur {
	width:80%;
	position:relative;
	margin:auto;
	height:5em;
	padding:0;
}

.HideLeftOverflow {
	position:absolute;
	height:100%;
	right:0;
	top:0;
	margin-right:0;
	width:100%;
	overflow:auto;
	border:1px dotted black;
	unicode-bidi:bidi-override; 
	direction:rtl;
	
}
.HideLeftOverflow p {
	unicode-bidi:bidi-override; 
	direction:ltr;
	text-align:right;
	position:absolute;
	right:1em;
	white-space:pre; /* ou nowrap; selon usage*/
}


</style>
<!--[if IE]>
<style type="text/css">
<!--
.HideLeftOverflow {overflow-x:hidden;}
-->
</style>
<![endif]-->

la gestion des scrollbar est en fonction du rendu voulu , la boite conteneur aura besoin d'un petit js pour s'adaptée la hauteur du contenu si besoin.
ceci reste une base.
Modifié par gcyrillus (19 Oct 2006 - 16:19)

Manque de pot, ton code ne fonctionne sur IE que parce que tu utilise un doctype, si tu le supprime, ça ne marche plus avec IE... Et le site pour qui ce code est destiné n'a pas de doctype (la première ligne des pages contiendra toujours <HTML>...). Malheureusement personne ne pourra ajouter de doctype sur notre site parce qu'il tourne sur un vieux CMS IBM qui s'appele "Aptrix" solution tournant chez nous (Alcatel) sur du Domino V5 : et se systeme ne permet pas la modification de la 1ere ligne... en attendant de changer de systeme, je doit trouver une solution ! Je continue à chercher en utilisant le "unicode-bidi:bidi-override" qui semble une bonne piste

le doctype que tu utilise

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Modifié par thieu (20 Oct 2006 - 09:25)

:)

a écrit :
Manque de pot ...

non , non , le forum est dédié aux standards, il ne fallait pas s'attendre a une reponse autre .
Ceci dit, un doctype 4.01 transitionnal devrait faire l'affaire et empeché IE de passer en mode "quirk" , IE ne demande qu'un doctype valide , declaré correctement et en premier ! (donc pas de prologue , xml , javascript ou autre commentaire avant celui-ci ).

++

Cher ami, pour travailler sur des systèmes d'information depuis 8ans je peux affirmer que le standard ne peut s'appliquer que rarement (voir mon topic précédent) : Je rappel donc que sur un système de gestion de contenu de type APtrix d'IBM, il n'est pas possible d'ajouter un doctype, je sais c'est complétement débile, mais c'est comme ça et ce n'est pas une exception dans le monde des gros CMS ! La raison est que les standards évolues plus vite que les éditeurs de CMS, et que quand une entreprise investi dans un système c'est pour le conserver au minimum 3 ans (c'est le cas d'Alcatel).

Mais toutefois 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é par thieu (20 Oct 2006 - 14:09)

bonjour ,
si il n'est pas possible de modifier le cms pour qu'il serve un doctypte , ou d'essayer de le servir avec la fonction header(); peut-etre chercher sur ce que le serveur lui même peut faire. (la je suis pas incompetent 100% , car je ne me suis pas encore posée la questions de comment ça marchait tout ça , a part quelque notions php et fichiers htacess et cie , ça ne vas pas loin du tout )

en html de base , il y a peut-etre moyen alors de faire cette "pirouette" droite gauche d'une autre façon.
... mettre cette ou ces lignes dans une page extrene , appelé ensuite par la balise object ou frame .

voici le code de 2 pages ... que je n'ai pas tester en inclusion a l'aide d'iframe ou object ... pas pris le temps , dans la soirée peut-etre .

une page au code non standard et tordu pour joindre opera a la partie .

<html>
<head>
<style type="text/css">
html , body {
direction:rtl;/* ie ne peut sans passer  [decu] */
unicode-bidi:bidi-override;
margin-left:-100%;
}
div {
margin:0;
padding:0;
direction:rtl;
position:relative;
margin-right:5%;
_margin-right:10%;
}
pre {
text-align:right;
direction:ltr;
background:#eee;
float:right;
}
</style>
</head>
<body  >
<div>
<pre>cette page est tester dans IE , Firefoxe et opera fin de ligne !!!
pour firefoxe et IE , c'est okay. fin de ligne!!!
Opera , ça a l'air de passer  mon fin de ligne !!!
la page est en "rtl pour IE ! , alors l'integrer en iframe si besoin et possible  

   mon texte mon texte mon texte  mon texte mon texte mon texte Heu ,  c'est du 

bricolage!!!
</pre>
</div>
</body>
</html>

et une autre IE6 / FF

<html><head>
<style type="text/css">
html {width:100%;}
body {
margin:0;
padding:0;
direction:rtl;
unicode-bidi:bidi-override;
text-align:right;
overflow:hidden;
width:100%;
}
div {
margin-right:20%;
}
pre {
direction:ltr;
text-align:right;
position:relative;
background:#eee;
float:right;
}
</style>
</head>
<body dir="rtl">
<div>
<pre>mon texte mon texte mon texte fin de ligne !!!
mon texte mon texte mon texte  mon texte mon texte mon texte fin de ligne!!!
mon texte mon texte mon texte  mon fin de ligne !!!
mon texte mon texte mon texte  mon texte mon texte mon texte  mon texte mon texte mon texte  mon texte mon texte mon texte !!!
</pre>
</div>
</body>
</html>

appellées seules, elle fonctionnent , maintenant voir si elle peuvent recevoir le reste du contenu de la page du site ou si elle peuvent etre inserée avec object ou iframe sans que leur comportement ce modifie.

l'indication de direction dans body est pour IE .

++

<edit> correction de quelques fautes d'orthographes, désolé pour les "standards" et la reponse jetée a la "va-vite"
....
pour tester sans doctype les page en iframe:
http://gcyrillus.free.fr/essai/thieu-no-dtd.html
</edit>
Modifié par gcyrillus (20 Oct 2006 - 23:45)

impressionant ! Tu maitrise les CSS, y a pas à dire.
Que signifie le underscore de "_margin-right:10%;" c'est pour opéra ?