Des sauts de lignes responsive

Pour couper les lignes de texte à l’endroit où on le souhaite lorsque l’écran devient trop petit en largeur, j’utilise 2 solutions qui sont assez similaires.

Balise <br />

Utiliser la balise <br /> avec un display à none ou block, en @media queries, selon la taille de l’écran.

Ici, au dessus de 768px de large, la balise <br /> est désactivée. En dessous, elle sera active.

<style>
    @media screen and (min-width: 768px){ 
        .br-responsive { display: none; } 
    }
</style>
<p>blabla <br class="br-responsive">blibli</p>

Balise <span></span>

Même idée, mais ici, la valeur de « display » est « block » sous la taille souhaitée, et « inline » au dessus.

<style>
    .br-responsive { display:block; }
    @media screen and (min-width: 768px){ 
        .br-responsive { display: inline; } 
    }
</style>

<span class="rwd-line">ligne 2</span>

A toi de voir selon le cas quelle est la meilleure méthode !