html (+ css): indica un luogo preferito per un'interruzione di riga


109

Diciamo che ho questo testo che voglio visualizzare in una cella di una tabella HTML:

Honey Nut Cheerios, Wheat Chex, Grape-Nuts, Rice Krispies, Some random cereal with a very long name, Honey Bunches of Oats, Wheaties, Special K, Froot Loops, Apple Jacks

e voglio che la riga si interrompa preferenzialmente dopo una delle virgole.

C'è un modo per dire al renderer HTML di provare a rompere in un punto designato e farlo prima di provare a rompere dopo uno degli spazi, senza utilizzare spazi unificatori? Se utilizzo spazi unificatori, aumenta la larghezza incondizionatamente. Voglio che l'interruzione di riga avvenga dopo uno degli spazi, se l'algoritmo di ritorno a capo l'ha provato prima con le virgole e non riesce a far rientrare la riga.

Ho provato a racchiudere frammenti di testo negli <span>elementi, ma non sembra che sia utile.

<html>
  <head>
      <style type="text/css">
        div.box { width: 180px; }
        table, table td { 
          border: 1px solid; 
          border-collapse: collapse; 
        }
      </style>
  </head>
  <body>
    <div class="box">
      <table>
      <tr>
          <td>lorem ipsum</td>
          <td>lorem ipsum</td>
          <td>lorem ipsum</td>
      </tr>
      <tr>
          <td>lorem ipsum</td>
          <td>
            <span>Honey Nut Cheerios,</span>
            <span>Wheat Chex,</span>
            <span>Grape-Nuts,</span>
            <span>Rice Krispies,</span>
            <span>Some random cereal with a very long name,</span>
            <span>Honey Bunches of Oats,</span>
            <span>Wheaties,</span>
            <span>Special K,</span>
            <span>Froot Loops,</span>
            <span>Apple Jacks</span>
          </td>
          <td>lorem ipsum</td>
      </tr>
      </table>
    </div>
  </body>
</html>

nota: sembra che il comportamento CSS3text-wrap: avoid sia quello che voglio, ma non riesco a farlo funzionare.


è possibile utilizzare spazi unificatori all'interno delle campate.
Gabriele Petrioli

3
Ma io non voglio usare non spazi -breaking. Mi piacerebbe usare gli spazi "non voglio-rompere-qui-ma-lo-sarò-se-devo-", ma per quanto ne so, quelli esistono.
Jason S

@ Jason .. ti sento .. ma non è possibile .. ha aggiunto una risposta.
Gabriele Petrioli

drat, questo è ciò che accade quando gli informatici scrivono algoritmi di rendering senza input da tipografi.
Jason S

1
dovresti accettare la risposta di @ EggertJóhannesson in quanto fornisce una buona soluzione alternativa!
Gabriele Petrioli

Risposte:


156

Usando

span.avoidwrap { display:inline-block; }

e avvolgendo il testo in cui voglio essere tenuto insieme

<span class="avoidwrap"> Text </span>

si avvolgerà prima in blocchi preferiti e poi in frammenti più piccoli secondo necessità.


16
Funziona alla grande! Solo una nota in più: gli spazi all'inizio e alla fine di un blocco in linea vengono ignorati, quindi per delimitare il testo in blocchi per spazio è necessario posizionarlo tra blocchi in linea. Ad esempio, se gli intervalli sono stati progettati per diventare blocchi in linea, allora <span>Hello </span><span> world</span>lo saranno Helloworlde <span>Hello</span> <span>world</span>saranno normali Hello world.
utente

2
<wbr> è più semantico e lascia il controllo nel browser, il che è generalmente una buona cosa. In questo caso rende possibile la rottura quando è vitale.
Lodewijk

Funziona alla grande - quando è importante, i caratteri come "-" non si interrompono. Esempio: Perikles <span class = "avoidwrap"> (um & nbsp; 500-429 & nbsp; v.Chr.) </span>
Sarah Trees

10
@Lodewijk: <wbr>non indica un luogo preferito per rompere la linea, ma uno possibile .
Dan Dascalescu

1
Nota che questa tecnica funziona anche per i messaggi nidificati <span>, quindi puoi (in effetti) specificare una gerarchia di punti di interruzione preferiti.
Michael Dyck

24

C'è una soluzione RWD molto ordinata di Dan Mall che preferisco. Lo aggiungerò qui perché alcune altre domande relative alle interruzioni di riga reattive sono contrassegnate come duplicati di questa.
Nel tuo caso avresti:

<span>Honey Nut Cheerios, <br class="rwd-break">Wheat Chex, etc.</span>

E una riga di CSS nella tua media query:

@media screen and (min-width: 768px) {
    .rwd-break { display: none; }
}

7

Una risposta facile è usare il carattere spazio a larghezza zero. &#8203; Viene utilizzato per creare spazi di interruzione all'interno di parole in punti specifici .

Fa l' esatto opposto dello spazio unificatore &nbsp; (beh, in realtà il word-joiner &#8288; ) ( word-joiner è la versione a larghezza zero dello spazio unificatore )

(ci sono anche altri codici unificanti come il trattino unificatore &#8209; ) (ecco una risposta esauriente su diverse 'varianti' di nbsp )

Se si desidera una soluzione HTML-only (senza CSS / JS) è possibile utilizzare una combinazione di spazio di larghezza zero e lo spazio non-breaking , ma questo sarebbe davvero disordinato , e la scrittura di una versione leggibile richiede un piccolo sforzo .

ctrl+ c, ctrl+ vaiuta

esempio:

   Honey&nbsp;Nut&nbsp;Cheerios,<!---->&#8203;<!--
-->Wheat&nbsp;Chex,<!---->&#8203;<!--
-->Grape&#8209;Nuts,<!---->&#8203;<!--
-->Rice&nbsp;Krispies,<!---->&#8203;<!--
-->Some&nbsp;random&nbsp;cereal&nbsp;with&nbsp;a&nbsp;very&nbsp;long&nbsp;name,<!---->&#8203;<!--
-->Honey&nbsp;Bunches&nbsp;of&nbsp;Oats,<!---->&#8203;<!--
-->Wheaties,<!---->&#8203;<!--
-->Special&nbsp;K,<!---->&#8203;<!--
-->Froot&nbsp;Loops,<!---->&#8203;<!--
-->Apple&nbsp;Jacks

illeggibile? questo è lo stesso HTML senza tag di commento:

   Honey&nbsp;Nut&nbsp;Cheerios,&#8203;Wheat&nbsp;Chex,&#8203;Grape&#8209;Nuts,&#8203;Rice&nbsp;Krispies,&#8203;Some&nbsp;random&nbsp;cereal&nbsp;with&nbsp;a&nbsp;very&nbsp;long&nbsp;name,&#8203;Honey&nbsp;Bunches&nbsp;of&nbsp;Oats,&#8203;Wheaties,&#8203;Special&nbsp;K,&#8203;Froot&nbsp;Loops,&#8203;Apple&nbsp;Jacks

Tuttavia, poiché il rendering html della posta elettronica non è completamente standardizzato, è utile per quel tipo di utilizzo poiché questa soluzione non utilizza CSS / JS

Inoltre, se lo utilizzi in combinazione con una qualsiasi delle <span>soluzioni basate su, avrai il controllo completo dell'algoritmo di interruzione di riga

(nota editoriale :)

L'unico problema che ho riscontrato è se volessi cambiare dinamicamente i punti di rottura preferiti. Ciò richiederebbe la manipolazione JS costante di ciascuna delle dimensioni proporzionate degli intervalli e la gestione di quelle entità HTML nel testo.


1
cosa sono gli span hack?
Jason S

Le altre risposte sfruttano i tag span.

Voglio anche notare che sebbene questa soluzione non sembri la più semplice, è la più affidabile, perché quelle entità non cambiano e non dovrebbero cambiare la rappresentazione semantica spesso tra browser, parser di posta elettronica o qualsiasi altro parser HTML.

3

La risposta è no (non è possibile modificare l'algoritmo di interruzione di riga utilizzato ).

Ma ci sono alcune soluzioni alternative (la migliore è la risposta accettata )

Puoi avvicinarti con lo spazio unificatore &nbsp;ma solo tra le parole che vanno insieme ( quello che hai in intervalli, ma non dopo la virgola ), oppure puoi usare il white-space:nowrapcome citato da @Marcel.

Entrambe le soluzioni fanno la stessa cosa ed entrambe non romperanno un gruppo di parole se non si adattano da sole.


Argh. :-( che puzza, significa che o devo conviverci, o devo provare a rilevare le lunghe code da solo nel tentativo di sconfiggere l'algoritmo di interruzione di riga.
Jason S

Ho modificato la tua risposta per fornire un collegamento alla soluzione alternativa, poiché quasi non ho continuato a leggere a causa del modo in cui è formulata la prima riga.
arootbeer

@arootbeer: supporto la tua modifica, ma Gaby l'ha annullata. Gaby: perché? Vuoi indurre in errore gli utenti?
Dan Dascalescu

@DanDascalescu, tutte le risposte dovrebbero essere modificate in modo che puntino a quella accettata nella stessa pagina? La mia risposta ha 1 voto ( somma ) e c'è una risposta accettata con 48 voti. Sono abbastanza sicuro che quello accettato sia quello che riceve l'attenzione ( ed è giusto che sia così ). Oltre a ciò, insisto sul fatto che non c'è modo di cambiare l'algoritmo di rottura utilizzato ( come richiesto dall'OP )
Gabriele Petrioli

1
controlla la mia soluzione usa la tua logica contro di te. combinalo con una qualsiasi delle soluzioni span, quindi avrai il controllo completo dell'algoritmo di

2

Con il tuo mark-up sopra l'uso span { white-space:nowrap }. È buono come puoi aspettarti davvero.


Grazie, ma non funzionerà perché fondamentalmente traduce gli spazi all'interno di un spanelemento in &nbsp;e impedisce che gli spazi si rompano affatto. Voglio solo scoraggiare il renderer dall'interruzione tra uno dei miei elementi, ma se deve, voglio che lo faccia.
Jason S

@ Jason S: ho aggiunto altre opzioni alla mia risposta.
Marcel

come è &nbsp;<wbr>diverso da uno spazio? Da quello che posso dire, le scelte sono o che un dato personaggio consenta una pausa o no. Cosi '-' e '' ed &#8203;e <wbr>e &shy;tutte permettono una pausa (la stampa di una pausa trattino-solo-on-trattino, spazio, niente, niente, e, rispettivamente), mentre &nbsp;non è così.
Jason S

@ Jason S: aggiunto utilizzo di esempio.
Marcel

L'ho appena provato e non sembra avere la priorità sugli spazi per l'interruzione di riga. La priorità è ciò di cui ho bisogno. Se il comportamento di rottura per un diverso carattere o elemento è sì o no, allora non c'è soluzione per il mio problema. Se ci sono priorità di interruzione di riga relative, allora potrei avere una soluzione.
Jason S

1

Nuova risposta ora abbiamo HTML5:

HTML5 introduce il <wbr>tag. (Sta per Word Break Opportunity.)

L'aggiunta di <wbr>indica al browser di interromperla prima di qualsiasi altra cosa, quindi è facile spezzare le parole dopo le virgole:

Honey Nut Cheerios,<wbr> Wheat Chex,<wbr> Grape-Nuts,<wbr> Rice Krispies,<wbr> Some random cereal with a very long name,<wbr> Honey Bunches of Oats,<wbr> Wheaties,<wbr> Special K,<wbr> Froot Loops,<wbr> Apple Jacks

È supportato da tutti i miei principali browser tranne IE.


12
-1. Perché non hai provato prima di consigliare? Non funziona. <wbr>ha un altro scopo. Per non parlare del fatto che questa risposta è un duplicato di una risposta che esisteva molto tempo prima.
utente


13
<wbr>crea solo un'opportunità di pausa; non "dice al browser di interromperlo prima di qualsiasi altra cosa". Usato prima di uno spazio, normalmente è inutile, poiché gli spazi sono normalmente opportunità di interruzione di riga.
Jukka K. Korpela

5
Questo non funziona affatto, in nessun browser. La risposta è sbagliata: <wbr>non non privilegiare un'interruzione di linea su spazi bianchi ordinaria. Quindi il wrapping avviene normalmente nell'esempio.
adrian

3
Per chiarire, <wbr> intende segnalare "qui è un posto in cui puoi rompere", quando quella posizione sarebbe altrimenti considerata all'interno di una parola . Dice "tratta il punto tra questi due personaggi come se ci fosse uno spazio lì", non "preferisci rompere qui". Se c'è già uno spazio, <wbr> non ha significato.
Punto

-1

Puoi semplicemente regolare le impostazioni dei margini in CSS (margin-right in questo caso).

text {
    margin-right: 20%;
}

-3

Utilizzare <div>invece di <span>o specificare una classe per SPAN e assegnargli l' attributo display: block .


-5

C'è un elemento HTML per questo ™: l' <wbr>elemento (ora standardizzato) .

Ti consiglio di usarlo. Potrebbe non funzionare ovunque , ma è il meglio che puoi fare senza passare attraverso i cerchi.


3
-1: <wbr>serve per contrassegnare i punti di interruzione su parole molto lunghe, non risolve il problema con le interruzioni di riga preferite
utente

4
@ user3075942 Citazione diretta dalla specifica : "L' wbrelemento rappresenta un'opportunità di interruzione di riga". Questo è esattamente ciò che chiedeva OP. Smetti di votare le persone in base a ciò che leggi sui wiki.
Mathias Bynens

3
Sì, opportunità . Ma i browser hanno già l'opportunità di rompere gli spazi. La domanda è come dire a un browser in quali spazi è preferibile interrompere.
utente

1
... e la risposta è usare <wbr>.
Mathias Bynens

8
No, non è questa la risposta. Non aumenta la probabilità di utilizzo di una particolare possibilità di punto di rottura preesistente; aggiunge solo una nuova possibilità di punto di interruzione, dove non esiste già. Avere due possibilità di seguito non è di alcuna utilità. developer.mozilla.org/en-US/docs/Web/HTML/Element/wbr
Torin Finnemann
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.