Quelles sont les meilleures pratiques pour gérer les sauts de ligne souhaités dans la conception de sites Web réactifs?

Je conçois beaucoup d'articles Web simples sur une seule page pour les ventes ou les e-mails. Je trouve souvent que je rencontre des problèmes avec les titres et les sauts de ligne souhaités à différentes largeurs de support.

Par exemple, je pourrais avoir un titre tel que:

Notre New thingamabob est la meilleure chose depuis le pain tranché!

Sans aucune attention aux sauts de ligne, les sauts de ligne comme celui-ci:

Notre New thingamabob est la meilleure chose depuis
le pain tranché!

À pleine taille, j'aimerais rompre la ligne après "le". Création de deux lignes.

Notre New thingamabob est la
meilleure chose depuis le pain tranché!

Pour un écran de largeur moyenne, je casserais deux fois:

Notre New thingamabob
est la meilleure chose
depuis le pain tranché!

Pour des écrans encore plus étroits, je casserais après "nouveau", après "thingamabob" et après "thing". Création de quatre lignes.

Notre New
thingamabob
est la meilleure chose
depuis le pain tranché!

Je ne veux vraiment pas utiliser les balises break ( <br>) parce que cela fixe les pauses à toutes les tailles. Jusqu'à présent , je l' ai utilisé les requêtes des médias et des pourcentages de largeur pour les différents h1- h5balises afin que la largeur des forces de marquer une pause. Mais cela me semble "hacky" (c'est aussi très capricieux parfois basé sur le texte réel).

Quelle est la meilleure façon de contrôler les sauts de ligne sans les coder en dur en HTML?

Je ne le conseille que sur la base du fait qu'il est utilisé pour de courts extraits de texte et non pour des paragraphes.

Le formatage des titres peut et doit être contrôlé autant que possible dans des limites raisonnables . JavaScript, ou des éléments supplémentaires inutiles ne sont pas tout à fait des «limites raisonnables» .

Les espaces insécables en revanche ... peuvent être utiles lorsqu'ils sont utilisés avec modération.
Les placer entre les paires de mots et les triplets que vous souhaitez conserver ensemble peut produire les résultats souhaités.

Cependant, vous ne pouvez pas en utiliser plusieurs consécutivement, selon la longueur des mots que vous utilisez, un trop grand nombre de liens forcera le texte à déborder de la fenêtre ou de son conteneur.

Une expérimentation rapide sur votre propre ensemble de mots devrait révéler les meilleurs mots à lier.

Pour l'exemple de cette question, le code HTML pourrait ressembler à ceci:

<span>Our&nbsp;New thingamabob is&nbsp;the best&nbsp;thing since&nbsp;sliced&nbsp;bread!</span>

Il n'y a en fait aucun CSS nécessaire ici. Le CSS dans cet exemple que j'ai produit est juste pour le plaisir.

En un mot, la clé de cette méthode est de limiter le nombre d'endroits où le texte peut se casser.

Après avoir relu la question, je me rends compte que je n'ai pas tout à fait satisfait aux exigences. Pour ce cas spécifique, et en supposant qu'il existe d'autres pages qui nécessitent la même attention, je définirais un seul <br>pour un point d'arrêt pleine largeur. Je réutiliserais alors la même classe sur chacune des pages à l'endroit le plus idéal de l'en-tête.

Cette <br>classe s'effondrerait sur quelque chose de plus petit que pleine largeur agissant comme si elle n'était même pas là, avec l'utilisation de requêtes multimédias. Pour les tailles de fenêtres inférieures à la largeur totale, nous nous appuyons  uniquement sur les fenêtres .

Un autre exemple avec un single<br> plus proche de la marque.

Le HTML:

<span>
    Our&nbsp;New thingamabob is&nbsp;the<br class="full-width-breakpoint"/> best&nbsp;thing since&nbsp;sliced&nbsp;bread!
</span>

Le CSS:

@media screen and (max-width:550px) {    /* Max Width depends on your design */     
    .full-width-breakpoint {             /* only experimentation or */
        display:none;                    /* calculation will reveal */
        line-height:0;                   /* the best max-width */
    }
}

La meilleure pratique consiste à reconnaître que vous n'avez aucun contrôle réel sur les sauts de ligne sur le Web et qu'il est préférable de concevoir dans cet esprit.

Toute solution contraire devra, invariablement, être hacky. Comme ce sera un hack car HTML n'adhère pas aux sauts de ligne définis par l'utilisateur en dehors du codage en dur. Vous pouvez le faire assez facilement avec JS. Configurez vos points d'arrêt avec des plages vides avec des classes uniques, puis en fonction de la taille de la fenêtre d'affichage, vous pouvez injecter des balises BR dans chaque plage souhaitée.

Il existe certains styles CSS qui fonctionneront sur les nouveaux navigateurs pour contrôler la façon dont le navigateur gère le retour à la ligne, mais cela ne vous donnera toujours pas le contrôle exact que vous recherchez dans cette situation.

D'un autre côté, si votre objectif n'est pas tant de contrôler des sauts de ligne spécifiques, mais de vous assurer que votre bloc de texte `` empile '' sur des lignes relativement égales, je définirais la largeur de la DIV différemment pour chaque fenêtre. Ce ne sera pas parfait, mais probablement assez proche et pourrait être le meilleur compromis.

Il existe un plugin jquery pour cela, Balance Text .

Il s'agit d'un plugin créé par Adobetext-wrap: balance; créé en même temps que la proposition d' Adobe pour obtenir une option CSS qui ferait juste cela comme la fonctionnalité Balance Ragged Lines d'Adobe InDesign (sonne bien, mais même si elle est acceptée, il faudra des années avant que les navigateurs ne la prennent en charge).

Le plugin, cependant, fonctionne en ce moment. Il équilibre tous les éléments qui ont la classe balance-text, ou sur l'utilisation de jQuery comme$('.some-elements').balanceText();

• Voici une démo officielle d'Adobe , utilisant du texte justifié .

• Voici une démo que j'ai faite en utilisant <h1>s aligné à gauche - appuyez sur modifier pour voir le code. Cela montre certaines des limitations au moment de la rédaction:

Limites

Ce code ne fonctionne actuellement que sur du texte dans des balises de niveau bloc sans éléments en ligne.

En démo 4 vous verrez comment tout au sein de votre bloc de texte équilibré comme un <a>lien, <span>s ou accent comme <em>, <strong>, <b>, <i>etc alors retiré.

De plus, en comparant les démos 1, 2 et 5, vous verrez que vous semblez avoir besoin d'utiliser à la fois la classe CSS et l'appel jQuery.

Il semble modérément fiable mais parfois glitch - au moment de la rédaction, il glisse parfois lorsqu'il est dans une colonne latérale, laissant des orphelins seuls (mais il semble fonctionner 95% + du temps et je ne l'ai pas encore vu glisser, sauf dans une colonne latérale), et pour des raisons inexpliquées, mes démos ne fonctionnent pas sur Firefox mais les démos d'Adobe le font (bien dans IE9 +, ne peut pas tester dans IE8 pour le moment). Si vous l'utilisez, prenez en compte le temps de test.

Je dois y faire face un peu régulièrement, avec des commentaires de designers voulant que les choses se cassent d'une certaine manière. J'ai trouvé que le moyen le plus simple de le faire est de mettre un span avec une classe à l'intérieur du texte, puis de le faire display: block;pour les requêtes multimédias.

Cela ressemblerait donc à ceci:

<p>This is some text and I want <span class="mobile-only-line-break">only this text to break, but only on mobile</span></p>

Ensuite, j'aurais CSS avec quelque chose comme ceci:

@media all and (max-width: 767px) {
.mobile-only-line-break { 
display: block;
}
}

Vous devez encore passer par là et le raffiner pour vous assurer que les choses cassent comme vous le souhaitez pour toutes les largeurs.

Si c'est un problème fréquent, vous pouvez créer votre propre ensemble de classes de saut de ligne à la Twitter Bootstrap ou quel que soit le système de grille que vous utilisez, en modélisant les noms de classe selon la convention de dénomination que vous utilisez.

Vous pouvez utiliser JavaScript pour détecter la largeur de l'écran et écrire la bonne version (avec les <br> comme vous les avez dans votre message) dans une div vide via innerHTML.

Malheureusement, les «pauses Web souhaitées» et les «meilleures pratiques Web» ne vont pas de pair. Lâchez votre désir perfectionniste de mettre chaque mot au bon endroit - il y a tout simplement trop de possibilités d'écran et trop de lecteurs qui n'ont pas la mentalité de concepteur, vous devez même vous soucier des sauts de ligne dans leurs titres. Recherchez Responsive Web Design pour mieux comprendre ces problèmes.

Ma méthode actuelle ...

<h1>Our New thingamabob is the best thing since sliced bread!</h1>

Et le CSS:

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
   h1 { margin: 0 auto; text-align: center; width: 280px; }
}

@media only screen 
and (min-width : 321px) {
    h1 { margin: 0 auto; text-align: center; width: 280px; }
}


@media only screen 
and (max-width : 320px) {
    h1 { margin: 0 auto; text-align: center; width: 280px; }
}


@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
    h1 { margin: 0 auto; text-align: center; width: 550px; }
}


@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
    h1 { margin: 0 auto; text-align: center; width: 800px; }
}


@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
    h1 { margin: 0 auto; text-align: center; width: 550px; }
}


@media only screen 
and (min-width : 1224px) {
    h1 { margin: 0 auto; text-align: center; width: 800px; }
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
    h1 { margin: 0 auto; text-align: center; width: 1200px; }
}


@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
    h1 { margin: 0 auto; text-align: center; width: 280px; }
}

Les largeurs nécessitent parfois un ajustement en fonction du texte réel utilisé, mais c'est le schéma général que j'utilise. Réduire essentiellement la largeur de la h1balise afin que la ligne se casse là où je veux qu'elle se casse.

Cela fonctionne, cela nécessite simplement des tests approfondis pour s'assurer que les pauses se produisent là où vous le souhaitez. Mais, des tests approfondis sont nécessaires dans tous les cas. Donc, ce n'est pas nécessairement plus de travail à cet égard.

Vous pouvez ajouter white-space: nowrapet placer <wbr>aux endroits où vous souhaitez autoriser les sauts de ligne. Si cela ne suffit pas et que vous souhaitez un contrôle précis des requêtes multimédias, vous pouvez toujours ajouter des classes comme<wbr class="mobileOnly">

<wbr>doc: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/wbr