web-dev-qa-db-fra.com

Gestion des espaces insécables: <p> nbsp; </ p> vs. <p> </ p>

&nbsp; est un espace insécable, qui représente un espace vide dans lequel aucune rupture de ligne ne se produit.

Si j'utilise

<p>&nbsp;</p>

J'ai un espace entre deux passages (plus grande pause). Si j'utilise

<p> </p>

Je n'ai qu'une nouvelle ligne entre les deux passages (pas de pause). Pourquoi?

htmlcssspace
62
grabner

En HTML, les éléments ne contenant que des caractères blancs normaux sont considérés comme vides. Un paragraphe qui contient uniquement un caractère d'espace normal aura une hauteur nulle. Un espace insécable est un type spécial de caractère d'espacement non négligeable. Il peut donc être utilisé comme contenu pour un paragraphe non vide.

Même si vous considérez les marges CSS sur les paragraphes, puisqu'un paragraphe "vide" a une hauteur nulle, ses marges verticales vont réduire . Cela fait qu'il n'a pas de hauteur ni de marges, ce qui donne l'impression qu'il n'a jamais été là.

68
BoltClock

Que diriez-vous d'une solution de contournement? Dans mon cas, j'ai pris la valeur de textarea dans une variable jQuery et changé tout "<p>&nbsp" en <p class="clear"> et effacez la classe pour avoir une certaine hauteur. et margin, comme dans l'exemple suivant:

jQuery

_tinyMCE.triggerSave();
var val = $('textarea').val();
val = val.replace(/<p>&nbsp/g, '<p class="clear">');
_

le val est ensuite enregistré dans la base de données avec le nouveau val.

CSS

_p.clear{height: 2px; margin-bottom: 3px;}
_

Vous pouvez ajuster la hauteur et la marge à votre guise. Et puisque 'p' est un élément display: block . cela devrait vous donner le résultat attendu.

J'espère que ça t'as aidé!

5
Roshdy

Si je comprends votre problème, cela devrait marcher

& emsp: l'espace em; cela devrait être un très grand espace, généralement autant que quatre espaces réels. & ensp - le en space; cela devrait être un espace assez large, à peu près deux espaces réguliers. & thinsp: ce sera un espace étroit, encore plus étroit qu'un espace normal.

Sources: http://hea-www.harvard.edu/~fine/Tech/html-sentences.html

1
user5181462