Retour à la ligne d'un titre sans coupure de mots

Bonjour à tous,

Lorsque mon site https://www.yomedya.fr/ passe sur un petit écran smartphone par exemple, les mots de fin de phrases des titres des sliders sont mis en retour à la ligne et sont coupés. Je voudrais que les mots soient mis en entiers lorsqu'il y à des retour de ligne. Les retours de ligne se font uniquement en mode responsive, je ne souhaite pas pour l'instant réduire le font size.

Je me suis documenté ici ci-dessous et essayé de trouver la solution en testant avec l'inspecteur de Chrome mais rien ne fonctionne :
https://www.alsacreations.com/tuto/lire/1038-gerer-debordement-contenu-et-cesures-css.html
et avec toutes les propriétés en bas de page ici : http://stylescss.free.fr/v2-properties/word-break-wrap.php

Merci d'avance pour vos propositions et solutions.

facile:

hyphens: none;

Merci, j'avais déjà essayé et ça ne fonctionne pas,
Re : Voir ma capture écran ci-jointe :

pas facile de s'y retrouver la-dedans:
W3C trouve 153 erreurs dans la page html,
je suppose que le js et le css c'est la même chose,
lighthouse désasteux,
pfff

Ben !
Bon ! J'avais aussi fait un test avec white-space: nowrap; font-size: 23px !important; pour la class sppb-sp-slider-title et ça fonctionne, mais bon ! c'est pas ce que j'ai besoin.
Il me faut garder la même taille de police et juste que les mots ne soient pas coupés.

Déjà, c'est plutôt hyphens:auto; qui fonctionnerait.

Puisque tu tiens absolument à conserver la taille de ton texte, il reste une solution. Pas élégante ni conseillée, mais ça fonctionne, tu mets des <br> partout où tu constate que tes mots vont être mal coupés.
Il devrait y avoir une solution plus élégante, mais je sèche.
Et il faudra centrer ton texte, afin que les <br> ne créent pas des décalages.
Modifié par Bongota (03 Oct 2023 - 16:12)

Lorsque je met white-space: nowrap; font-size: 23px !important; la taille 23px ne me gène pas pour les petits écran (smartphones), le truc c'est que la taille 23px reste pour les grands écrans d'ordinateur et là, ça fait trop petit.
Je suppose qu'il faudrait régler ça via un media queries , par ex @media (min-width: 767px) et cela pour tous les titres du slider, c'est ça ? Comment faire ?

Il faut oublier les valeurs en px pour le responsive.
Si tu as mis tes titres de slider en h... tu peux :

@media (min-width: 767px){
 
 h... {font-size:2em;}
 }

La base est là, mais il faut un peu paramétrer suivant tes désirs.
Modifié par Bongota (03 Oct 2023 - 23:16)

Merci, c'est ok

J'ai ajouté à la classe .sppb-sp-slider-title : white-space: nowrap; pour qu'il n'y ai pas de retour à la ligne et font-size: 23px !important; pour ajuster la largeur du titre au responsive.

Et pour doubler la taille du titre sur les grand écrans, j'ai ajouté
@media (min-width: 767px){.sppb-sp-slider-title {font-size:2em !important;}}

Maintenant il y reste un problème sur le titre "Chirurgiens - Dentistes en Guadeloupe" ( https://www.yomedya.fr/ ), je voudrais qu'en responsive pour un meilleur confort visuel que le retour à la ligne se fasse avant les 2 mots "en Guadeloupe" (avant le en).
Lorsque pour tester et autoriser le retour à la ligne, je retire white-space: nowrap; le retour à la ligne se fait avant le mot "Guadeloupe" mais ce n'est pas correct visuellement.

J'ai placé l'élément html <wbr /> avant le "en" de "en Guadeloupe" mais cela ne fonctionne pas.
Il y à une animation sur la phrase, est à cause de ça ?
Une solution ?

PS: L'élément HTML <wbr> permet de représenter un emplacement où casser la ligne si nécessaire. Le navigateur pourra alors utiliser cet emplacement pour effectuer un saut de ligne si le texte est trop long et qu'en temps normal, une règle empêche le saut de ligne.
https://developer.mozilla.org/fr/docs/Web/HTML/Element/wbr

Ci-joint capture écran.
Modifié par Chatrou176 (04 Oct 2023 - 22:02)

Salut,

Je suppose que tu dois pouvoir mettre une espace insécable pour que "en" et "guadeloupe" restent collés.

Salut,

J'ai essayé mais ça ne fonctionne pas, en fait ! on dirait que pour son bon fonctionnement, le script de l'animation insère déjà automatiquement des espaces insécables entre chaque mots (ou espaces vide). Voir ma capture écran.
J'ai aussi essayé de rajouter à la fin du mot Guadeloupe plusieurs &nbsp; mais nada !

Peut être qu'un spécialiste de ce genre d'animation pourra nous éclairer, l'effet s'appelle Ease in Out.

Hello,

Le problème ne vient pas directement de l'animation mais sans doute du script JS qui modifie les styles durant l'animation.

En attendant, ce pose véritablement problème se situe dans cette partie de CSS :

.sppb-sp-slider-title {
    font-size: 26px;
    margin-top: 0;
    margin-bottom: 0;
    white-space: nowrap;
    font-size: 23px !important;
}

En supprimant la règle white-space: nowrap; tout s'arrange. Si tu ne peux pas la supprimer, tu peux l'annuler en mettant la valeur par défaut white-space: normal;

Bonne chance et bon week-end !

Merci.
En fait ! pour faire des tests, si tu regarde ma capture écran ci up, dans l'inspecteur à droite, j'ai désactivé white-space: nowrap; pour voir comment réagi la phrase en responsive, je vais désactiver white-space: nowrap; définitivement, certainement dans sppagebuilder uniquement pour cette phrase lorsque j'aurais trouvé la solution car lorsque je désactive white-space: nowrap; en responsive il y a bien un retour à la ligne mais les mots ne se coupent pas au bon endroit.

Le retour à la ligne devrait être fait comme ceci (bien sûr, sur le site le titre sera centré) :
CHIRURGIENS - DENTISTES
EN GUADELOUPE
Actuellement lorsqu'on désactive white-space: nowrap; on a :
CHIRURGIENS - DENTISTES EN
GUADELOUPE

Pour faire fonctionner correctement l'animation on dirait que c'est le script JS qui ajoute entre chaque mots de la phrase un insécable &nbsp; comme ceci (voir ma précedente capture écran) :
CHIRURGIENS&nbsp;-&nbsp;DENTISTES&nbsp;EN&nbsp;GUADELOUPE

A moins d'une autre solution, je pense qu'idéalement pour avoir :
CHIRURGIENS - DENTISTES
EN GUADELOUPE
il faudrait :
CHIRURGIENS&nbsp;-&nbsp;DENTISTES<wbr />EN&nbsp;GUADELOUPE

Dans l'attente, bon weekend à tous !

Pour centrer automatiquement ton titre en répartissant les lignes : https://developer.chrome.com/blog/css-text-wrap-balance/

Hum ! pas évident


Modifié par Chatrou176 (09 Oct 2023 - 15:05)

Bon ! Puisqu'apparemment c'est le type d'animation "Ease in Out" qui cause le problème, J'ai changé le type d'animation pour "Zoom" et j'ai mis le titre comme ça :
CHIRURGIENS - DENTISTES<wbr />EN&nbsp;GUADELOUPE
Le retour à la ligne est maintenant correct en responsive.


Modifié par Chatrou176 (09 Oct 2023 - 17:02)

En tout cas je vais être hors sujet mais je trouve ton site très sympa et agréable

Grapux01 a écrit :
En tout cas je vais être hors sujet mais je trouve ton site très sympa et agréable

Merci
Modifié par Chatrou176 (11 Oct 2023 - 17:06)