[Résolu] Mise en forme titre sans html

Bonjour à tous, j'espère que la chasse à été bonne

Je viens par ici car je cherche à mettre en forme un titre :

<h2 class="h3">
<a href="#">D989 - MON TITRE EST ICI - COULEUR</a>
</h2>

Donc la forcément il s'écrit en ligne mais j'aurai souhaité obtenir ce résultat (en 3 lignes centrées) :
D989
- MON TITRE EST ICI -
COULEUR

La contrainte c'est que je ne peux pas modifier le html.
Est-il donc possible d'obtenir ce résultat en y ajoutant des règles CSS ou par jquery ?
Genre If "tiret je vais à la ligne" ?
Merci par avance et bon soleil
Je vous remercie

Bonjour!

J'aurais tendance à penser que sans toucher au HTML ça me paraît compliqué!

Tu pourrais mettre des conditions en SCSS et encore, il faudrait que chaque élément est quelque chose qui le distingue des autres.

Le plus simple serait de mettre chaque bout dans un span et faire un "display: block;".

Ou sinon en essayant avec "white-space: pre-line;", peut-être?

Et l'eau,

En css classique, je ne vois pas de solution. En JS via jQuery puisque tu le cites :
https://codepen.io/niuxe/pen/dyNzzem?editors=1111
Modifié par niuxe (06 Apr 2021 - 14:58)

Bonjour,

Pour Infos,
Si tu connais le nombre de caractères qu'occupent la partie du texte considéré comme ton titre, tu peut en css te servir de width:xxch (nbre caractères + espaces) + :first-line et word-spacing . demo de l'idée https://codepen.io/gc-nomade/pen/YzNxEJZ .

Cette longueur peut aussi être trouvé via js,cependant le script de niuxe fait parfaitement le job.

Cdt,
Modifié par gcyrillus (06 Apr 2021 - 16:26)