Choisir l'endroit de retour à la ligne dans un texte / titre

Salut tout le monde !

Voici ma question:
- J'ai un titre H1 qui s'affiche sur ordi sur une ligne et ça me va très bien
- sur smartphone il s'affiche sur deux lignes mais j'aimerais donc choisir l'endroit du retour à la ligne pour garder une certaine harmonie sémantique, existe t'il un moyen ? Si possible CSS/HTML, mais sinon JS ?

==> Je cherche du côté des white-space et Co. mais je ne crois pas que cela puisse faire ça ?

Dans le concret pour que ce soit peut être plus clair:
- "High-speed art by United Creatives" s'affiche sur une ligne quand il y a la place
- Sur smartphone, cela devient "High-speed art by united" et "Creatives" à la ligne
- J'aimerais forcer le retour à la ligne, seulement dans le cas où le contenu ne peut pas être affiché sur une ligne, avec "High-speed art" et "by united creatives"

Merci d'avance pour toute l'aide que vous pourrez m'apporter, je continue à chercher en attendant.

++

En premier, tu peux essayer de jouer avec les espaces insécables. En principe on coupe à la fin d'un mot et en plaçant stratégiquement des espaces insécables à la place des espaces normaux, tu devrais arriver à quelque chose.

Sinon, en complément, il y a la balise <wbr />. Contrairement à <br />, <wbr /> est juste une suggestion de saut de ligne. Autrement dit le navigateur est censé faire un saut de préférence là où se trouve cette balise s'il a besoin, mais il n'est pas obligé si ce n'est pas nécessaire. De son coté, <br /> est une obligation stricte de saut de ligne.
Le problème c'est que je ne sais pas où en est le support, je crois que c'est assez faible...

Je pense que découper le texte en deux (ou plusieurs) span stylés white-space: nowrap; séparés devrait faire l'affaire, du genre:

h1 span {white-space: nowrap;}

<h1> <span>Ceci est le début:</span> <span>du titre</span> <span>et ceci est la fin</span></h1>

Hello les gars et merci de vos réponses,

Alors:
- La solution <wbr /> paraît de loin la plus simple et la plus logique. Sauf qu'elle ne fonctionne pas, d'après le W3C c'est réservé à la césure au sein d'un mot. Mais effectivement la gestion d'une balise similaire serait génial.
- La solution à Span avec le no-wrap, c'était ce à quoi je pensais au départ, mais ça non plus ça ne semble pas fonctionner
- Et comme d'hab pour un petit problème tordu, c'est la solution la plus "moche" (qui l'est pas tant que ça au final), qui l'emporte: le &nbsp; ! Pas testé partout mais ça fonctionne sous Chrome en tous cas !

Si quelqu'un pense à une solution plus logique / propre, je reste preneur.

Merci et à plus !

djbabs a écrit :

- La solution à Span avec le no-wrap, c'était ce à quoi je pensais au départ, mais ça non plus ça ne semble pas fonctionner

Tu penses bien que je ne te l'aurais pas indiquée si je n'avais pas vérifié qu'elle fonctionne. Peux tu nous donner un exemple qui ne fonctionne pas?

Perso, la seule solution qui fonctionne partout que j'ai trouvé pour ce cas de figure, c'est l'utilisation d'espaces insécable comme mentionné par QuentinC. J'ajoute cet espace quasi systématiquement à chaque fin de phrase afin d'éviter les veuves et orphelines.

Au temps pour moi PapyJP, j'étais perplexe après ton affirmation dons j'ai re-testé et effectivement, ça fonctionne. Je travaille sur wordpress et ai mis à jour mon thème entre temps, pourtant le main CSS ne semble pas avoir changé et rien ne semblait pouvoir contrer la règle du H1 span, peut être une erreur de balises ou un truc comme ça la première fois où j'ai testé.

En espérant que le white-space soit pris correctement en compte par tous les navigateurs ...

EDIT = Eh oui mais non !

Je viens de déployer la solution sur d'autres titres, et ça ne fonctionne pas, peut être parce que cette fois-ci les span englobent des balises img (elles même contenues dans le H1) ? Le titre devient alors vraiment insécable et s'affiche comme sur ordi en respectant tout de même la balise </br>. Je n'ai pas loisir de te montrer ce que ça donne car pré-prod.

Je crois que je vais donc en rester au bon vieux &nbsp; ...

HAHA re au temps pour moi, dommage qu'on ne puisse pas éditer les posts ... je crois qu'il est temps d'aller me coucher.

OK alors pour utiliser la méthode white-space:
- Les espaces contenus normalement dans votre phrase entre deux mots où les balises span vont être insérées doivent se trouver entre ces deux balises (une ouvrante et une fermante normalement), et non à l'intérieur
- Pareil si vous avez des </br>, pas à l'intérieur du span

==> reste à tester sur un max de navigateurs ...

djbabs a écrit :
HAHA re au temps pour moi, dommage qu'on ne puisse pas éditer les posts ... je crois qu'il est temps d'aller me coucher.

OK alors pour utiliser la méthode white-space:
- Les espaces contenus normalement dans votre phrase entre deux mots où les balises span vont être insérées doivent se trouver entre ces deux balises (une ouvrante et une fermante normalement), et non à l'intérieur
- Pareil si vous avez des <br/> pas à l'intérieur du span

Exactement.

Désolé de n'avoir pas été plus clair, je pensais que mon exemple parlait de lui même.
Je sais rien que rien n'interdit de mettre ce qu'on veut dans un <span>, mais en règle générale, je ne mets pas d'autre balise à l'intérieur d'un <span>, qui est justement une balise destinée à contenir des fragments de texte et à leur donner une présentation particulière.
Si on met un <br/>, c'est que le fragment est terminé. C'est une convention, tout à fait discutable j'en conviens, qui m'est tellement habituelle que je n'y pense plus.

djbabs a écrit :
==> reste à tester sur un max de navigateurs ...

Depuis des années que j'utilise cette méthode (bien avant qu'on parle de HTML5) je n'ai jamais eu de problème sur aucun navigateur.
Modifié par PapyJP (20 Mar 2015 - 11:05)