Costringendo un widget di descrizione a capo
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?
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.