28172 sujets

CSS et mise en forme, CSS3

[résolu] Largeur d'un élément en fonction du contenu

Bonjour,

j'essaye de trouver l'astuce me permettant d'avoir un élément aussi large (et pas plus) que son contenu pour y appliquer un background.
Avec le code suivant, le background prend (comme normalement toute la largeur disponible) :
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>

<style type="text/css">
p {
	white-space:pre;
	background-color:#FFFF00;
	margin:20px;
	}
</style>
</head>

<body>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aenean commodo ligula eget dolor.
Aenean m</p>

</body>
</html>


Moi, j'aimerais que mon <p> soit aussi large que la ligne la plus longue. Ici : "Lorem ipsum dolor sit amet, consectetuer adipiscing elit."

Merci d'avance.
@ bientôt Smiley langue
Modifié par Tchupacabra (10 Dec 2008 - 13:53)
P est un élément de type bloc, son comportement normal est donc de prendre toute la largeur disponible.

En ajoutant un width:0; on obtient ce qu tu veux sous IE6 (je n'ai pas d'autre navigateur sur la main pour tester) mais ce n'est pas une bonne solution. L'utilisation d'un élément de type en ligne aura nativement le comportement que tu souhaite (tu peux également définir ton p comme étant en ligne : display:inline; mais le fond ne s'applice alors qu'au texte).
L'adaptation à la largeur du contenu est une caractéristique des positionnements ou mode de rendu suivants:
- display: table
- display: table-cell (plus ou moins)
- display: inline-block
- position: absolute
- position: fixed
- float: left|right

Chacun a ses caractéristiques propres. Le moins problématique est sans doute display:table. Il y a d'ailleurs un tutoriel sur ce sujet qui a été publié très récemment sur Alsacréations.
Sujet clos
Aller à