Interruzione di riga discrezionale in HTML?

Question

Sto cercando un modo per specificare dove una linea dovesse rompere se non può andare bene sulla sua linea in un modo simile a ­ (trattino debole/discrezionale), ma con uno spazio. Ho provato a cercarlo su google, ma non ho ottenuto molti successi rilevanti (principalmente per InDesign nonostante avessi specificato "html"), e quello che ho ottenuto è stato un po 'di persone che dicevano di non sapere in che modo.

Es.

Ciao, il mio nome
è foo.
vs
Ciao,
il mio nome è foo.
ma se lo spazio è disponibile:
Ciao, il mio nome è foo.

Per la specificità, non intendo white-space: normal/nowrap/pre/… e io non voglio forzare una rottura come con <br />.

Sto usando AngularJS, quindi la maggior parte di tutto viene elaborata tramite JavaScript, quindi se c'è un modo facile/efficiente/intelligente per farlo, sarei aperto a questo.

Answer 1

Non credo che ci sia alcun modo nativo per farlo, ma qui è un hack ho usato ogni volta che ho davvero bisogno di questo genere di cose:

var str = "Hello,<br>My name is foo."; 

str = str.replace(/ /g, '&nbsp;').replace(/<br>/g, ' '); 

In sostanza, utilizzare uno spazio unificatore per separare le parole a cui non vuoi rompere.

vederlo qui in azione: http://jsfiddle.net/5xmt6/ (ridimensionare la finestra per vedere come reagisce).

---

Nota: questo è molto hacky, e introduce una propria serie di problemi; vale a dire: se il viewport diventa estremamente stretto, il resto del testo non verrà avvolto.

Answer 2

è possibile utilizzare il tag <wbr>.

EDIT: Come accennato nei commenti, si potrebbe usare un zero-width space: ​ (Vedi anche: What's the opposite of a nbsp?)

Answer 3

per indicare dove un'interruzione di riga dovrebbe non comparire tra le parole, utilizzare uno spazio no-break, o '  `, tra le parole. Qualsiasi spazio normale è fragile. Quindi puoi scrivere ad es.

Hello, my name is foo. 

Se si preferisce indicare le pause consentite (come per il vostro commento qui sotto), è possibile avvolgere il testo all'interno di un elemento nobr (non standard, ma funziona come un fascino) o all'interno di qualsiasi elemento per il quale si imposta white-space: nowrap , quindi non consente le interruzioni di riga tranne quando esplicitamente forzato o consentito. Dovresti quindi utilizzare il tag <wbr> (non standard, ma ...) o il riferimento di carattere ​ o ​ (per ZERO WIDTH SPACE) dopo uno spazio per consentire un'interruzione di riga, ad es.

<nobr>Hello, <wbr>my name <wbr>is foo.</nobr> 

La scelta tra <wbr> e ZERO WIDTH SPACE è un tricky issue, principalmente a causa stranezze IE.