Spans + retour à la ligne, sans <br> ni

Voilà mon problème :

<div>
<span>blablabla</span>
<span>blablabla</span>
<span>blablabla</span>
</div>

Je souhaite que :
1- la largeur de mes spans ne corresponde qu'à la largeur nécessaire au contenu (car leur background est visible)
2- il y ait un retour à la ligne après chaque span.

-> la propriété inline (par defaut pour les spans) valide mon souhait 1 mais pas le 2.
-> la propriété inline-block valide mon souhait 2 mais pas le 1.
-> j'ai testé les flex que je ne connais pas et ça n'a pas donné ce que je veux non plus.
-> en mettant des <div> à la place des <span> et en jouant avec diplay ça ne donne pas ce que je veux non plus.

Je préfèrerais vraiment ne pas utiliser de balise <br> qui font vraiment brouillon je trouve.

Connaissez-vous une solution à mon problème ?!

comme ça, c'est pas bon ?

http://codepen.io/anon/pen/epGrrL

Bonjour,
Apparemment

span:before {content:""; display: block; }

fonctionne.

le sujet a déjà été abordé ici: http://forum.alsacreations.com/topic-4-20685-1-Resolu-Creer-un-retour-a-la-ligne-grace-a-quotafterquot.html

Bonjour a tous,

ou comme ça :

div{display:block}
span{background:red;display:table}

Ou bien, si chaque ligne de "blablabla" est assimilable à un paragraphe :

<p><span>blablabla</span>[...]</p>
<p><span>blablabla</span>[...]</p>
<p><span>blablabla</span>[...]</p>

Car il faut bien prendre en considération qu'une suite de span est retranscrite par un lecteur d'écran comme faisant partie de la même phrase.

Exemple :

<span>blablabla</span>
<span>blablabla</span>
<span>blablabla</span>

...donne : "blablablablablablablablabla"
Avec les <p>, le lecteur retranscrira "blablabla" "blablabla" "blablabla".

...Et par voie de conséquence, et ce une fois les marges retirées, le problème de rendu sera réglé.
Modifié par Nigel (15 Oct 2015 - 13:57)

Sinon tu insères le caractère saut de ligne via CSS :

span::after { content: "\A"; }

Un peu sioux, mais il me semble que ça fonctionne.

a écrit :
Car il faut bien prendre en considération qu'une suite de span est retranscrite par un lecteur d'écran comme faisant partie de la même phrase.

Merci pour avoir mis cela en évidence, c'est quelque chose de plutôt méconnu et qui pose un certain nombre de problèmes que peu de monde comprend.

Le fait est que span est défini comme fondamentalement un élément inline. Le transformer en block gêne les lecteurs d'écran et certains navigateurs, qui supportent très mal cette conversion et qui tentent, malgré les instructions CSS, de les conserver sur une seule ligne.

IL vaudrait mieux les mettre en inline-block et ajouter des <br />, ou bien encore mieux, ne pas du tout utiliser <span> pour des éléments que tu souhaites voir affichés sur des lignes individuelles. De toute façon, c'est sémantiquement faux de vouloir le faire avec des <span> seuls. <p> ou <div> feront très bien le travail en réglant les marges et padding comme tu le souhaites.
Modifié par QuentinC (16 Oct 2015 - 08:34)

@QuentinC, je suis d'accord avec ton dernier point. Par contre, je ne savais pas pour le reste. Pour ma culture perso, aurais-tu un exemple de lecteur sur lequel ça pose problème ?
Car pour ma part pour avoir essayer mes sites partout ou je le pouvais j'ai jamais rencontrer ce genre d'erreur... Merci

a écrit :
Car il faut bien prendre en considération qu'une suite de span est retranscrite par un lecteur d'écran comme faisant partie de la même phrase.

Manifestement, ces lecteurs d'écrans évoqués plus haut sont des lecteurs vocaux, pour internautes aveugles (ou très mal-voyants).

Bonne continuation.
Modifié par thierry (16 Oct 2015 - 11:15)

Merci de vos conseils, j'ai un peu tâtonné avec vos propositions.

J_B, ta proposition ne fonctionne pas comme je le voudrais: quand le contenu d'un span est plus large que les autres, les surlignages-backgrounds des autres spans s'élargissent aussi.

Etant donné ce que Nigel a dit, que les spans sont considérés et conçus pour être des bouts de phrase, je vais peut-être utiliser une double balise (mais ça multiplierait énormément le nombre de div pour pas grand chose...)
Ce qui est dommage avec la balise <p> c'est que je n'arrive pas à obtenir que sa largeur s'adapte exactement au contenu, elle prend toujours la largeur du conteneur, comme les div.

Je verrai ce que je peux obtenir avec la solution de Safina: merci pour ta proposition, elle marche parfaitement pour le surlignage (dès que j'ai le temps je vois comment gérer mon text-align avec !)

Merci pour les propositions avec les pseudo-éléments, ça va me donner l'occasion de les tester un peu.

Je préciserai ce que j'ai trouvé de plus adapté dès que j'aurai trouvé.

Merci
Modifié par Cymophane (16 Oct 2015 - 14:06)

mais sur ton site, ce sont des div dans des div, et non des span.. qu'est ce que tu cherche exactement ? parce que le background au survol prend bien toute la longueur du texte.

Salut Jencal,

C'est des div parce que c'est la version initiale, j'ai fait des tests hors ligne et j'ai pas changé le site en ligne puisque j'avais pas obtenu ce que je voulais.
Je mettrai des spans puisque c'est plus propre pour du texte, on ne peut pas faire plus convainquant que les arguments avancés dans la discussion )

Là, comme tu dis, pour le surlignage c'est ok, mais il n'y pas de retour à la ligne ( ça se voit quand les phrases sont courtes.) J'ai testé les pseudo classes sans réussir à comprendre pourquoi ça ne fonctionnait pas pour le retour à la ligne.
Tous les tests que j'ai fait, si j'ai le surlignage ok alors j'ai pas le retour à la ligne et vice-versa.

En plus j'aimerais utiliser un float right car pour la partie de gauche le zoom se positionne plus élégamment sur les longues phrases.

J'aurais du temps pour refaire des tests dimanche...

Si ça se trouve c'est bidon et c'est moi qui me galère toute seule...!

Il suffit d'utiliser des <p> auxquels tu attribues un "display: table"

Salut Zelalsan,

Si seulement... Avec <p> et display:table j'ai toujours le problème de l'alignement à droite (la colonne de gauche doit être alignée à droite le long de la ligne)
Le display:table ne prend pas en compte de text-align ni de right:0 donc tu me diras: float ! Ce serait le rêve mais ça bugg : là sur le site j'ai mis un float:right et tu peux constater:

- plus de retour à la ligne (aufsteigen: 3eme et 4ème phrases sur la même ligne)
- quand les phrases sont "déroulées" le verbe juste en dessous à un surlignage disproportionné qui ne se règle pas avec un line-height...

la colonne de droite on s'en fout, elle me pose pas de problème http://maina.lgy.fr/verbenbaum.html

merci de m'avoir répondu !

Bon assez tordu ton truc .
Tu dois mettre un overflow:hidden sur tes classes .ph et un clear: both sur tes classes .de

Une autre façon de faire

span{
    float:left;
    clear:both;
}