web-dev-qa-db-fra.com

Entité HTML de rupture de ligne facultative toujours invisible

Je veux un caractère de coupure de ligne facultatif, toujours invisible, qui fonctionne avec le style CSS Word-wrap: break-Word;.

Voici quelques détails. Mon objectif est de séparer les longs liens dans des endroits raisonnables. Ces caractères sont un bon point de départ: -, ., _, /, \. Ce n'est pas une question spécifique à Rails, mais je voulais partager un code que j'utilise maintenant:

module ApplicationHelper
  def with_optional_line_breaks(text)
    text.gsub(%r{([-._/\\])}, '\1­')
  end
end

Voici le problème avec le code ci-dessus: lorsque ­ prend effet (dans un tableau avec: Word-wrap: break-Word;), ­ s'affiche sous la forme -. Je ne veux pas voir le -; Je veux un saut de ligne sans aucun caractère affiché.

htmlline-breakshtml-entities
38
David J.

​ est l'entité HTML pour un caractère unicode appelé espace à largeur nulle (ZWSP).

"Dans les pages HTML, cet espace peut être utilisé comme un saut de ligne dans les mots longs comme alternative à la balise <wbr>." - Espace de largeur nulle - Wikipedia

La balise <wbr> fonctionne également, comme indiqué par Réponse de Aaron . Je pense que je préfère cette entité HTML à la balise, car elle semble plus simple: Unicode la gère, pas le navigateur Web.

64
David J.

<wbr> ressemble à ce que vous voulez, mais à son support, et &shy; à cet égard est très inconsistant . Donc, malheureusement, il n’est peut-être pas un moyen particulièrement efficace de faire ce que vous voulez.

6
Aaron Maenpaa

Je posterai ceci en guise de réponse, en 2019, bien qu'il tire sa substance des autres contributions sur cette page: utilisez <wbr>. Cela fonctionne bien en permettant de boucler les longues URL et de ne pas les faire sortir des zones de contenu. Les utilisateurs étant capables de coller le lien que vous montrez dans un navigateur Web, l’importance est grande et la prise en charge de <wbr> convient aux navigateurs modernes, selon caniuse.com et mes propres tests rapides sous Chrome et Firefox pour Android. J'ai remplacé les barres obliques par des barres obliques et un WBR.

0
Geoff Kendall