1491 sujets

Web Mobile et responsive web design

[Résolu] Problème de chaîne longue

Bonjour à tous
Si vous affichez la page https://tests.osirisnet.net/news/n_11_15.htm?fr et que vous réduisez la largeur de l'écran à celle d'un téléphone mobile, vous obtenez:
upload/1554199233-48769-newsletterosirisnetnovembre-n.png
c'est à dire que la largeur de cet article ne se réduit pas en deçà d'une certaine valeur.
En regardant le code de près on voit que le problème réside dans le fait que l'auteur a mis vers la fin de l'article un texte très long sans caractère de rupture, à savoir:
Kritische_Anmerkung_zu_The_Burial_of_Nefertiti_von_Nicholas_Reeves
et que le navigateur refuse de "plier" la ligne au milieu des mots.
Je ne retrouve pas la directive CSS qui permet de corriger ce problème.

Pourriez vous rafraichir ma mémoire défaillante?
Merci de votre aide.
Modérateur
Bonjour,

Il existe hyphens: auto qui ajoute des coupures avec un tiret selon les règles de la langue
Il existe overflow-wrap: anywhere qui permet de couper un mot n'importe où et passer à la ligne seulement s'il déborde de la boîte.
Il existe word-break: break-all qui permet de couper un mot n'importe où et passer à la ligne tout le temps (déconseillé)

https://www.alsacreations.com/tuto/lire/1038-gerer-debordement-contenu-et-cesures-css.html
Modifié par kustolovic (02 Apr 2019 - 12:59)
Meilleure solution
Sauf si ce que j’ai écrit n’est pas ce que je crois avoir écrit il n’y a pas de largeur exprimée en absolu dans mes pages CSS. C’est du reste par là que j’ai commencé à chercher ce qui déc... et je n’ai pas trouvé.
J’ai également testé sans succès l’option overflow:ellipsis sans succès. Je pense que ce que propose Kustolovic doit permettre de résoudre ce problème. Je teste en rentrant chez moi
Effectivement avec 

article {
	display:table;
	width:100%;
	max-width:100%;  /* par précaution */
	border-bottom:1px solid #990000;
	padding-bottom:0.25em;
	overflow-wrap: anywhere; /* merci Kusto ! */
}

le problème disparait.
Merci beaucoup à tous.
Modérateur
p.s:

C'est possible de cacher les mots qui dépassent avec des ellipses mais il faut deux propriétés pour cela:


  overflow: hidden;
  text-overflow: ellipsis;


Ce n'est pas overflow: ellipsis.
La première propriété cache tout ce qui dépasse,
La seconde ajoute … au texte ainsi caché.
Hmm! phénomène bizarre: il semble que overflow-wrap: anywhere; ne soit pas compris par les navigateurs des mobiles, les seuls pour lesquels il est intéressant de plier ces f... lignes.
J'ai pensé que c'était une histoire de cache, j'ai donc vidé le cache de mon navigateur, sans succès. j'ai fini par mettre le code dans le html pour éviter les problèmes éventuels de cache, la totale! 
<article class="news"  style="overflow-wrap: anywhere;word-wrap: anywhere;max-width:100%;text-overflow:ellipsis;">

upload/1554456934-48769-newsletterosirisnetnovembre-n.png
L'adresse de la page: https://tests.osirisnet.net/news/n_11_15.htm

Une idée pour sortir de ce bourbier (autre que modifier le texte bien entendu)?
Modifié par PapyJP (05 Apr 2019 - 11:36)
Tu as raison, je ne comprends effectivement rien à ce que tu dis.

Je reprends la description de la situation actuelle de ce problème:

1) la page est correcte sur un navigateur PC si on réduit la taille de l'écran pour épouser celle d'un téléphone grâce à la directive 
overflow-wrap: anywhere;
que j'ai ajoutée dans la page de style /common.css qui est partagée par toutes les pages du site

2) par contre elle reste mal présentée sur un vrai téléphone, iPhone ou Android
J'ai cru que c'était parce que la page /common.css était dans le cache du navigateur, mais le problème persiste si je vide le cache.

J'avais bien vérifié au préalable que la raison était que l'auteur de la page a écrit en bas de l'article

<footer>
    <nav>
        Initial text by Nicholas Reeves :  <a href="https://www.academia.edu/14406398/The_Burial_of_Nefertiti_2015">https://www.academia.edu/14406398/The_Burial_of_Nefertiti_2015</a><br>
        addendum/corrigendum by Reeves :  <a href="https://www.academia.edu/15247276/The_Burial_of_Nefertiti_Addenda_and_Corrigenda_2015_" target="_blank">https://www.academia.edu/15247276/The_Burial_of_Nefertiti_Addenda_and_Corrigenda_2015_</a><br>
        A critical analysis by Prof. Dr. Frank Müller-Römer (in German) :  <a href="https://www.academia.edu/14921317/Kritische_Anmerkung_zu_The_Burial_of_Nefertiti_von_Nicholas_Reeves" target="_blank">https://www.academia.edu/14921317/Kritische_Anmerkung_zu_The_Burial_of_Nefertiti_von_Nicholas_Reeves</a><br>
        and the same in English : <a href="https://www.academia.edu/15171365/Kriti_s_remark_to_The_Burial_of_Nefertiti_by_Nicholas_Reeves" target="_blank">  https://www.academia.edu/15171365/Kriti_s_remark_to_The_Burial_of_Nefertiti_by_Nicholas_Reeves  </a>
    </nav>
</footer>

Mettre en clair les url au lieu de mettre un texte "normal" dans <a> est effectivement la cause de ce problème: ces urls sont très longues et influent sur la largeur de leur conteneur.

J'ai bien vérifié que si je "commente" le <footer> tout rentre dans l'ordre

La page du site "officiel" est https://www.osirisnet.net/news/n_11_15.htm?fr
Elle ne contient pas les modifications que j'ai tentées de mettre sans succès dans les pages
https://tests.osirisnet.net/news/n_11_15.htm?fr et https://tests.osirisnet.net/news/@n_11_15.htm?fr
Tout se passe comme si la directive 
overflow-wrap: anywhere;
n'était pas prise en compte par les navigateurs des téléphones.
Ce n'est peut être pas le cas, c'est peut être un effet de bord entre les différentes pages de style css, mais je n'ai rien trouvé, car s'il est facile de regarder ce qui se passe sur un navigateur FF ou Chrome sur un PC, je ne sais pas faire la même chose sur un téléphone.

Merci à tous de m'aider à sortir de ce pétrin.
La nuit portant conseil, c'était bien un effet de bord d'une autre commande CSS, qui donnait des résultats différents sous FireFox et sous les autres navigateurs.

article.news {display:"table";  width:100%; ...}

Je ne me souviens plus de la raison pour laquelle j'avais fait ça, il y a au moins 3 ans.
Comme width:100% n'est qu'une indication (ça fait "normalement" 100%, mais si nécessaire ça peut faire plus) les autres navigateurs continuent à élargir <article> sans plier la ligne, alors que FireFox plie la ligne.
En supprimant cette directive, <article> redevient un bloc et la largeur prend le pas.

Donc en résumé la bonne solution c'est 
overflow-wrap: anywhere;

à condition que la balise ne soit pas en 
display:table;

Modifié par PapyJP (06 Apr 2019 - 12:32)
Sujet clos
Aller à