Domanda

Sto cercando di ottenere una descrizione in un'applicazione XUL da racchiudere, anche se contiene righe lunghe.

Ad esempio, se conservo quanto segue come file .xul e lo apro in Firefox, sembra a posto e si avvolge in modo appropriato:

<?xml version="1.0"?>
 <?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
 <window
    id="theWindow"
    title="The Window"
    style="overflow: auto;"
    xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
    xmlns:html="http://www.w3.org/1999/xhtml"
    >


  <vbox flex="1" style="max-width: 200px; overflow:auto; border: 1px dotted black; padding: 2px;">
    <description style="border: 1px solid black; padding: 2px;">test</description>
    <description style="border: 1px solid black; padding: 2px;">test test test test test test test test test test test test test test test test test test test test test</description>
  </vbox>
</window>

Tuttavia, se rimuovo gli spazi nella linea grande, non viene avvolto e ottengo solo una barra di scorrimento per vedere la linea:

<?xml version="1.0"?>
 <?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
 <window
    id="theWindow"
    title="The Window"
    style="overflow: auto;"
    xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
    xmlns:html="http://www.w3.org/1999/xhtml"
    >


  <vbox flex="1" style="max-width: 200px; overflow:auto; border: 1px dotted black; padding: 2px;">
    <description style="border: 1px solid black; padding: 2px;">test</description>
    <description style="border: 1px solid black; padding: 2px;">testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest</description>
  </vbox>
</window>

Esiste un modo in cui posso usare i CSS o qualcos'altro per forzare l'avvolgimento della linea lunga quando raggiunge il limite di 200 pixel?

È stato utile?

Soluzione

Firefox 3.1 supporta questo: http://www.css3.info/preview/word -wrap /

  

La proprietà a capo automatico è stata inventata da Microsoft e aggiunta a CSS3. Permette alle parole lunghe di essere spezzate e di spostarsi sulla riga successiva. Ci vogliono due valori; normale o parola d'ordine.   Questo è attualmente supportato in IE, Safari e Firefox 3.1 (Alpha).

Con le versioni precedenti (e attuali) di Firefox non esiste un modo standard (Google era mio amico) di farlo. Alcuni suggeriscono di usare un piccolo script che aggiunge <br /> nel mezzo della parola. Usa word-wrap: break-word e spera che gli utenti possano eventualmente eseguire l'upgrade.

Altri suggerimenti

Originariamente ChatZilla usato per disperdere < img > elementi nell'output che fungerebbero da punti in cui le parole lunghe potrebbero finire, sebbene questa sia stata successivamente cambiata in < wbr > elementi.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top