28172 sujets

CSS et mise en forme, CSS3

[Résolu] Un "overflow hidden" qui coupe le texte à gauche

Bonjour,

Je butte depuis plusieurs heures sur un problème de mise en forme CSS.

Mon problème est le suivant :
- Afficher un texte sur une ligne dans un div (limité en largeur) même si ce texte est trop grand pour rentrer dans le cadre. (white-space : nowrap)
- Le texte doit être "coupé" s'il sort du div. (overflow: hidden)
- Le texte doit être aligné à droite et donc être "coupé" à gauche.

C'est ce dernier point que je n'arrive pas a résoudre.

J'ai mis en ligne un exemple :
http://www.cssfight.com/tests/overflowgauche.html


    <div id="title">
      J'aimerais que ce texte fasse un overflow vers la gauche plutôt que vers la droite.
    </div>




#title{
  width: 300px;
  text-align: right;
  overflow: hidden;
  white-space : nowrap;
}


Quelqu'un aurait-il une idée ?
Modifié par Slyoo (16 Jun 2008 - 09:41)
Bonjour,

J'ai tenté ceci, qui marche avec Firefox (à tester ailleurs):
<h1 id="title"><span>Bla bla du texte trop long lorem ipsum etc.</span></h1>
et pour le CSS:
h1#title {
	overflow: hidden;
	width: 300px;
	padding: 20px;
	font-size: 2em;
	background: blue;
	color: white;
}
h1#title span {
	float: right;
	width: 10000px;
	text-align: right;
}


Apparemment, le white-space: nowrap; bloque le text-align: right.
Bonjour Smiley smile

Ceci fonctionne aussi, sous FF uniquement.
Sous IE6 et Opera, le texte dépasse à droite.


div#title{
  width: 300px;
  text-align: right;
  overflow: hidden;
  white-space : nowrap;
  background-color: #00F;
  color: #FFF;

}
p { float: right; margin-right: auto; }


<div id="title">
     <p>J'aimerais que ce texte fasse un overflow vers la gauche plutôt que vers la droite.</p>
</div>

J'ai testé diverses solutions, aucune n'est valable pour un affichage correct partout (IE, Safari, Opera, Firefox).

Florent, ta solution ne fonctionne pas sous IE6, le texte se trouve à 10000px à droite et sort allègrement de la page Smiley smile
Merci pour ces deux solutions.
Je cherche effectivement une solution compatible ie6 et 7.

De mon côté, j'ai cherché s'il n'existait pas un moyen d'inverser le sens de rendu d'une page ou d'un élément. J'ai trouvé l'attribut dir="rtl" qui permet de rendre le texte de droite à gauche (pour la langue arabe par exemple), mais il n'agit pas sur les propriétés de rendu des conteneurs div. Smiley decu

Quelqu'un a-t-il une idée de ce coté là ?
Modifié par Slyoo (13 Jun 2008 - 14:35)
Modérateur
bonjour , quelques essais sans doctype ( date de 2006 , le comportement dans les differents navigateurs a probablement evolué) :

http://gcyrillus.free.fr/essai/thieu-no-dtd.html
http://gcyrillus.free.fr/essai/scroll-gauche.html

sur un autre post evoquant cette contrainte avec des images(balise html) il y a quelques mois , j'y ai aussi laissé un exemple (pas moyen de retrouvé le topic en question ... ) .

A prendre comme piste , mais il reste toujours cependant risqué de vouloir allez a l'encontre d'un comportement , disons ' naturel d'affichage.

Ce test se base sur le changement de direction d' affichage de la page , en essayant d'incorporé a une page s'affichant de gauche a droite , un morceau se comportant a l'opposée en s'affichant de droite a gauche (inversion des scroll bar comme le serait une page en 'arabe' ) . En principe , une page reprend qu'une seul de ces 2 possibilité , c'est l'un ou l'autre .

En css , c'est instable et 100% bidouille , Smiley smile , a mon avis .
Exemple a prendre comme une curiosité et pas une soluce .

(passant en coup de vent , je ne suis pas dispos pour suivre ce fil dans les jours qui viennent)

Merci
Ok, merci pour tous ces conseils, visiblement ce n'est pas possible de faire ça en restant compatible avec ie6 et compagnie et sans bidouiller... Smiley decu
Je vais donc opter pour une solution javascript adaptée au contexte de mon projet.

Merci encore et A+ Smiley cligne
Modérateur
re Smiley smile

c'est plus simple qu'il n'y parait , en appliquant a l'ensemble des navigateur la correction pour opéra sur mes essais , il semble que cela passe naturellement et sans bidouille.

Il suffit de donner virtuellement ( façon d'écrire) , une largeur de zero a l'element flottant pour l'empêcher de dépasser vers la droite sitot que sa largeur dépasse celle de son conteneur .
La contrainte est alors de donnée une largeur et une marge négative egale a la largeur totale de cette élément flottant pour le rendre compatible IE (attention au padding et a la faculté d'IE 6 et inférieur d'élargir ce conteneur) .


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
#title{
  width: 300px;
  text-align: right;
  overflow: hidden;
  white-space : nowrap;
  background-color: #00F;
  color: #FFF;
}
#title p {
float:right;
margin-left:-9999px;
width:9999px; /* largeur identique a la marge négative nécessaire pour IE */
}
    </style>
  </head>
  <body>
    <div id="title">
      <p>J'aimerais que ce texte fasse un overflow vers la gauche plutôt que vers la droite.</p>
    </div>

  </body>
</html>


Cela semble acceptable du coup Smiley smile

GC
Sujet clos
Aller à