Retour chariot dans un bouton html [FAQ]

**Rodrick** · 28/06/2007, 11h33

Bonjour!!!
Est-il possible de faire un retour à la ligne dans la value d'un input de type button?

EDIT: désolé, c'est la première fois que j'oublie de dire bonjour

**Strix** · 28/06/2007, 13h31

Bonjour à toi aussi...

Non je ne pense pas

A+

**chaminette** · 28/06/2007, 14h46

je ne crois pas non plus que ce soit possible !
A part si t'y arrives en utilisant la CSS !
tu fixes la taille de ton bouton. Tu crées une classe pour le texte que tu mets dessus et tu fixes aussi le width !
mais bon je n'y crois pas trop!

**xk155** · 28/06/2007, 15h00

Je pense aussi que c'est completement infaisable... Mais si tu y arrives, ça peut être marrant

**giragu03** · 28/06/2007, 16h57

Si si si...
C'est bourrin et laid, mais (un retour à la ligne dans le value) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<input type="button" value="Ligne1
Ligne2"/>

**Strix** · 28/06/2007, 19h51

J'aime bien ce genre de réponse

Tu te dis "non mais l'autre, un retour dans le code et ça donne un retour dans le submit... Pffff"

Chapeau giragu03

Et compatible FF et IE en plus !

PS : j'ai même mis 5 étoiles.... Non, vraiment, chapeau bas...

**xk155** · 29/06/2007, 07h42

Ô con ! C'est vrai en plus !!

EDIT: je vais faire mon chieur, mais ça marche pas sous Opera !!

**Strix** · 29/06/2007, 07h50

Eh, xk155, tu serais pas un peu pénible non ?

Une combine comme ça qui marche sur FF et IE c'est quand même énorme !
Alors oui faut faire des sites compatibles avec plein de navigateurs mais là, pour une fois, au diable les petits

**giragu03** · 29/06/2007, 08h12

Merci des compliments.
Pour info, ce code est du HTML 4.01 strict (validé sur le site du w3c)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>test</title>
</head>
<body>
<p>
<input type="button" value="Ligne1
Ligne2"/>
</p>
</body>
</html>

Donc après si Opéra ne respecte pas les standards, je n'y peux rien

**Bisûnûrs** · 29/06/2007, 08h48

Solution plus facile est beaucoup plus propre :

En PHP par exemple :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<?php
$button = "Texte sur\ndeux lignes";
?>
<input type="button" value="<?php echo $button ?>" />

**giragu03** · 29/06/2007, 09h12

Au final, le code généré sera celui que j'ai proposé, non ?
Ca a le mérite d'être beaucoup plus lisible, mais nécessite que le serveur supporte le php.

**Bisûnûrs** · 29/06/2007, 09h34

Envoyé par giragu03

Au final, le code généré sera celui que j'ai proposé, non ?

Certes, mais je trouve ça beaucoup plus lisible quand tu dois retravailler ton code.

Envoyé par giragu03

mais nécessite que le serveur supporte le php

Ou un autre langage serveur, mais en général, quasiment tous sont équipés maintenant.

**Auteur** · 30/06/2007, 11h18

sans utiliser PHP :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<input type="button" value="Texte &#10 sur deux lignes" id="idButton" />

notes :

avec &#13 IE fait un retour à la ligne mais pas Firefox ;
avec &#10 IE et Firefox font un retour à la ligne (donc avec la combinaison &#10 &#13 IE fait 2 retours à la ligne ! ) ;
Opéra ? je ne sais pas .

**Strix** · 30/06/2007, 12h11

On peut pas mettre plus de 5 étoiles, hein, c'est ça ?

Non parce que ça si c'est pas un sujet sympa !

**giragu03** · 30/06/2007, 13h07

La combinaison des deux (CR (&#13) + LF(&#10)) fait bien un seul retour à la ligne sous IE 7 et Firefox 2.0.0.4, ce qui est cohérent car un retour à la ligne c'est CR+LF.
Mais c'est peut-être l'ordre qui fait la différence.
Enfin une solution HTML élégante.

**Auteur** · 30/06/2007, 18h22

Envoyé par giragu03

La combinaison des deux (CR (&#13) + LF(&#10)) fait bien un seul retour à la ligne sous IE 7 et Firefox 2.0.0.4, ce qui est cohérent car un retour à la ligne c'est CR+LF.
Mais c'est peut-être l'ordre qui fait la différence.
Enfin une solution HTML élégante.

L'ordre n'a pas d'importance. En fait j'avais deux retours à la ligne sous IE (je suis toujours à la version 5

) car j'ajoutais un espace entre les deux caractères donc il faut écrire le texte dans le bouton de cette manière :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<input type="button" value="Texte&#10&#13sur deux lignes" id="idButton" />

pas espace avant le &#10, ni entre &#10 et &#13, ni après le &#13 (et l'ordre n'a a priori pas d'importance

).

On pourra remarquer également que par défaut, le texte est aligné à gauche sous IE et centré sous FF

Envoyé par Strix

On peut pas mettre plus de 5 étoiles, hein, c'est ça ?

Non parce que ça si c'est pas un sujet sympa !

on peut l'ajouter dans la FAQ si ce n'est pas déjà fait

.

**xk155** · 03/07/2007, 12h30

Eh, xk155, tu serais pas un peu pénible non ?

Ok, je sors...

Sérieusement, bravo pour cette solution. C'est du propre.

**Rodrick** · 03/07/2007, 17h37

Félicitation pour la solution et merci à tous!!!
Pour une fois que j'engage un sujet sympa.
Erf, je peux pas mettre d'étoiles à mon conversation.

**funfou** · 19/01/2017, 10h46

Bonjour,
Sinon il y a aussi "white-space: pre-wrap;" dans le CSS.

Retour chariot dans un bouton html [FAQ]

HTML

Discussions similaires

Partager

Partager