Un bloc qui s'adapte à la largeur du texte, impossible?

Hello,

Je cherche à adapter les contours d'un bloc autour d'un texte qui peut être sur une ou deux lignes (un titre).

Ça marche bien pour une seule ligne de texte avec plusieurs solutions, notamment float:left|right, display:table, display:inline-block. Par contre dès que le navigateur rejette le texte sur une deuxième ligne, il estime que la ligne de texte fait 100% de la largeur maximale pour le conteneur. Dans de nombreux cas de figure, notamment avec du texte un peu grand et des mots un peu long, on obtient un résultat peu esthétique.

Voici un exemple visuel:


Et la même chose en code:
http://covertprestige.info/temp/block-text-wrap.html

Quelqu'un aurait une solution intéressante pour obtenir le même résultat que lorsqu'on utilise <br>, mais... sans utiliser <br>?

Salut Florent,

Sous Firefox 3.6, Safari 5.0 et Google Chrome 5.0, effectivement, c'est la cata (les br n'étant même d'aucun effet avec display: block). En revanche, sous Opera 10.5, ça marche, sauf avec display: block (y compris avec l'élément br) et avec display: table sans br.

Je n'ai pas encore testé sous IE ; mais, je te fais suffisamment confiance.

Bref, AMHA, le recours à display: block semble d'emblée disqualifié.

Et je parie que, pour corser encore plus les choses, tu ne peux pas utiliser display: inline parce que tu as besoin de définir des dimensions.
Modifié par Victor BRITO (21 Jun 2010 - 19:04)

Victor BRITO a écrit :
c'est la cata (les br n'étant même d'aucun effet avec display: block)

Pour les BR en display:block c'est normal, c'est le comportement attendu.

Victor BRITO a écrit :
En revanche, sous Opera 10.5, ça marche

Intéressant.
Je vais relire les specs CSS 2.1 et CSS3, et je ferais éventuellement des rapports de bug si ce sont Firefox et Webkit qui sont dans le faux.

Pas encore testé dans IE, en fait.

Et je parie que, pour corser encore plus les choses, tu ne peux pas utiliser display: inline parce que tu as besoin de définir des dimensions.
J'étais en display:inline au départ avec du padding. Dès que ça passe sur deux lignes c'est pas terrible comme rendu.

bonjour,

selon l'exemple <div><p></p></div>

Pour <p> :
avec display:table et width:1%; l'element devrait s'adapter au mot le plus long ... (fêtes de la musique)
exit IE 7 (qui applique le width a la lettre et qui n'implemente pas le display:table;)
pour IE6 avec un CC inline+ zoom ça passera (deja vu sur le forum )

Alternative pour IE7 pour <div> et <p> (toujours selon l'exemple)

div p {width:1%;}
div {display:inline;background:gray;zoom:1;}

Il suffit de deplacer les fond , bordures et contexte de formatage sur le parent et restreindre la largeur du conteneur enfant des textes sans lui appliqué d'overflow.

Solution rigide, qui ne suit que l'exemple a l'attention d'IE7 en mode standard.

Cordialement , GC

<edit ... on en revient a un display:inline-block forcé pour les IEs obsolete en lieu et place d'un comportement de tableau a la base requis pour le rendu . />
Modifié par gc-nomade (21 Jun 2010 - 23:23)

Florent V. a écrit :
Pas encore testé dans IE, en fait.

Sous IE 8, ça ne marche qu'avec les éléments br (sauf avec display: block).

À propos d'Opera 10.5, ce que j'ai dit précédemment est constaté sous Mac OS X, car sous Windows, Opera 10.5 se comporte comme IE 8.

Quant à Konqueror 4.4 (sous Kubuntu 10.04), il se comporte comme IE 8 et Opera 10.5 sous Windows.
Modifié par Victor BRITO (22 Jun 2010 - 11:12)

gc-nomade a écrit :

Pour <p> :
avec display:table et width:1%;

... ou 1 px ! (display:table; = comportement <table> )

Cela me semble la solution la plus logique et adapté , formaté comme un tableau , le conteneur contient et s'agrandi de juste ce qu'il faut en gardant un comportement de type 'block' dans le flux.

il n'y a que IE7/6 qui posent problemes si l'on veut vraiment les faire rentré dans le rang .

Float a aussi ses defauts , positionnement dans le flux , ne contient pas les elements de type block qui gardent comme reference la largeur dispo du parent dans le flux
- comportement de IE6 en particulier ... aussi deja evoqué sur ce forum ... il ya deux ans peut-etre ou tu est intervenu aussi il me semble Florent , je n'arrive pas a retrouver le topic en question mais il etait deja question de relire les spec et de se faire a l'idée qu'un float sans largeur definie n'etait pas supposé restreindre les enfants de type block a leur contenu ...
je n'en ai gardé qu'un souvenir de type : pratique sur : pas de float sans width (et un display:inline pour ce vieux IE )

Cordialement

GC

Salut,

p { float: left;word-wrap: break-word; white-space: pre; }

Appliquée au code HTML de la page donnée en lien par Florent, cette déclaration semble résoudre le problème.
Ou alors je n'ai pas compris où se situe le problème
Modifié par Ericf (23 Jun 2010 - 13:29)

Ericf a écrit :

p { float: left;word-wrap: break-word; white-space: pre; }

Appliquée au code HTML de la page donnée en lien par Florent, cette déclaration semble résoudre le problème.

Je ne crois pas que le word-wrap:break-word ait un grand intérêt ici.
Dans la page d'exemple, utiliser white-space:pre fonctionne dans tous les cas de figure (float, display:inline-block et display:table). Mais ça revient à exactement la même chose que de mettre des BR dans le texte: il faut insérer des sauts de ligne manuellement aux endroits stratégiques. C'est du bricolage.

Florent V. a écrit :
il faut insérer des sauts de ligne manuellement aux endroits stratégiques. C'est du bricolage.

C'est ce que tu as fait dans la page que tu as mis en ligne, je me suis basé sur ton bricolage

EDIT : quoiqu'il en soit, pour ma part, en prod, je suis parfois confronté à des situations pour lesquelles le "bricolage", honni par les puristes et les intégristes, est inévitable. Comme chacun ici je présume
Modifié par Ericf (23 Jun 2010 - 15:44)

bonjour,

je n'ai probablement pas saisi le probleme non plus , car j'etait tenter par le white-space:pre; + display:inline-block; au premier abord si ce n'est l'auteur du topic et que l'on etait pas un vendredi
(oui , pour le lien que tu donnes , il y a un moment que j'ai compris que tu avait saisie l'utilité de ce display , cependant l'exemple que tu donnes en lien plus haut y ressembler fortement )


br sans br !? (sans balisage autre ou javascript ?)
le_mot_le_plus_long_que_ça_a_l_air.
Float = probleme et si il y a extraction partiel du flux , le W3C ne semble par imposer un comportement tel qu'aurait un élément en positionnement absolu ou fixe.

Une modification du contexte via inline-block semble alors la bonne piste .
mais qu'est ce qui determinerait un retour a la ligne ?
un balise formatter en block , un br ou un max-width ?

Derniere proposition :

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>HTML 4.01 </title>
<style type='text/css'>
h1 , h2 , h3 { border: 1px solid; background:lightgray;display:inline-block;padding:0.3em;}
h3 {max-width:18em;}
em {display:block;}
</style>
<!--[if lte ie 7]>
<style>
h1 , h2 , h3 {display:inline;zoom:1;}
</style>
<![endif]-->
</head>
<body>
<div>
<h1>some title wich is pretty long and ends up <br/> with two spanning lines</h1>
<p>blabla</p>
<h2>some title wich is pretty long and ends up <em>with two spanning lines</em></h2>
<p>bla bla secondaire </p>
<h3>some title wich is pretty long and ends up <b>eventually with spanning lines</b><comment>exit IE6 et mode quirk</comment></h3>
</div>
</body>
</html>

Possible que je n'ai toujours pas compris ou se situe la difficulté.


Cordialement,
G.Cyrille

J'ai trouvé une solution qui, à défaut d'être satisfaisante, me semble un compromis acceptable : il suffit d'appliquer tout simplement la propriété white-space avec la valeur pre-line. Ça marche sur tous les paragraphes sans br (sauf si la valeur de display est block) sous Firefox 3.6, Opera 10.5, Safari 5, Google Chrome 5 et IE 8. Sous IE 6 et 7, ça marche avec la valeur pre de white-space (pre-line et pre-wrap ne sont pas reconnues), sauf si display a pour valeur block, inline-block ou une valeur non prise en charge (comme table) ; et si l'on force la valeur inline-block par un display: inline, le résultat peut être catastrophique en présence d'une bordure ou d'une couleur d'arrière-plan. Je n'ai pas essayé sous Konqueror (quelqu'un connaîtrait-il un équivalent de Firebug pour ce dernier ? ).

Cela dit, pour que ça marche, il faut passer à la ligne à intervalles réguliers, comme tu l'as fait dans ton code source. Bref, difficile de se passer du bidouillage.

Et pas besoin de word-wrap, en effet.
Modifié par Victor BRITO (24 Jun 2010 - 10:32)

Ericf a écrit :
EDIT : quoiqu'il en soit, pour ma part, en prod, je suis parfois confronté à des situations pour lesquelles le "bricolage", honni par les puristes et les intégristes, est inévitable. Comme chacun ici je présume

Bien sûr, d'ailleurs j'ai déjà mis des <br> dans le code du site en prod (enfin, en pre-prod).

Pour info, j'ai supprimé les retours à la ligne dans la page d'exemple, pour qu'il soit plus clair que certaines solutions exigent de rajouter des retours à la ligne à la main à des endroits précis.

Victor BRITO a écrit :
J'ai trouvé une solution qui, à défaut d'être satisfaisante, me semble un compromis acceptable : il suffit d'appliquer tout simplement la propriété white-space avec la valeur pre-line.
(...)
Cela dit, pour que ça marche, il faut passer à la ligne à intervalles réguliers, comme tu l'as fait dans ton code source. Bref, difficile de se passer du bidouillage.

"pre-line" est plus intéressant que "pre" si on souhaite juste que le navigateur prenne en compte les retours à la ligne (et pas les espaces et tabulations), mais ça reste fondamentalement la même chose que la solution d'Eric et celle de placer des <br> dans le texte: il faut déterminer manuellement où le ou les sauts de ligne vont survenir pour que la largeur du bloc s'adapte à la largeur du texte.
Et donc, à tout prendre, je préfère utiliser des <br>, c'est plus explicite et plus facilement maintenable.

Victor BRITO a écrit :
Je n'ai pas essayé sous Konqueror (quelqu'un connaîtrait-il un équivalent de Firebug pour ce dernier ? ).

Je ne teste jamais sous Konqueror pour ma part. J'espère qu'ils ont définitivement adopté Webkit, vu que ça fait des années qu'ils devaient le faire.

Florent V. a écrit :

Bien sûr, d'ailleurs j'ai déjà mis des <br> dans le code du site en prod (enfin, en pre-prod).

Toujours tendance à l'éxagératrion hein...

Ericf a écrit :
Toujours tendance à exagération hein...

Heu, tu penses à quoi? Au terme «bricolage»? Je ne pense pas qu'il soit exagéré. Insérer des <br> dans les titres (ou des sauts de ligne) est une solution problématique:
- C'est souvent impossible si le contenu est géré dans un CMS (titre d'une page ou d'un article).
- Cela demande une intervention humaine, qui plus est un minimum «experte» (si c'est un rédacteur qui intervient sur les pages, la solution sera zappée).
- Ça ne résiste pas à l'agrandissement de la taille du texte par l'utilisateur), à des designs en largeur fluide ou partiellement fluide, à l'utilisation d'une fonte de substitution, voire même à des différences subtiles dans le rendu des caractères (texte qui a tendance à être plus large sur Mac par exemple). Dans le pire cas de figure, on peut se retrouver avec un début de phrase dont le dernier mot passe à la ligne, puis le <br> arrive, et la fin est sur une troisième ligne.

Donc «bricolage» me semble adapté. Ce qui ne veut pas dire que la solution n'a pas de mérite.

Salut Florent, salut tous,

Florent V. a écrit :

Heu, tu penses à quoi? Au terme «bricolage»?

Non, lorsque je dis que tu à tendance à exagérer, je pense à ça :

Florent V. a écrit :

Bien sûr, d'ailleurs j'ai déjà mis des <br> dans le code du site en prod (enfin, en pre-prod).

Il doit y avoir méprise, car jamais je n'ai préconisé ni même suggéré d'utiliser des br pour faire de la mise en page, et je ne le ferai jamais