Forçando um widget de descrição a envolver
Pergunta
Estou tentando obter uma descrição em um aplicativo Xul para envolver, mesmo que ele contenha longas filas.
Por exemplo, se eu economizar o seguinte como um arquivo .xul e abrir no Firefox, ele parece bom e envolve adequadamente:
<?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>
No entanto, se eu remover os espaços na grande linha, ela não ficará embrulhada e eu só recebo uma barra de rolagem para ver a linha:
<?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>
Existe alguma maneira de usar o CSS ou qualquer outra coisa para forçar a longa linha a ser embrulhada quando atingir o limite de 200 pixels?
Solução
O Firefox 3.1 suporta o seguinte: http://www.css3.info/preview/words-wrap/
A propriedade Word-Wrap foi inventada pela Microsoft e adicionada ao CSS3. Ele permite que palavras longas possam ser quebradas e envolver na próxima linha. Leva dois valores; Palavra normal ou de quebra. Atualmente, isso é suportado no IE, Safari e Firefox 3.1 (alfa).
Com versões mais antigas (e atuais) do Firefox, não existe uma maneira padrão (o Google era meu amigo) de fazê -lo. Alguns sugerem o uso de um pequeno script que adiciona <br />
no meio da palavra. Usar Enrolamento de palavras: palavra de descanso e espero que os usuários eventualmente atualizem.
Outras dicas
Originalmente Chatzilla costumava espalhar vaziou003Cimg> Elementos na saída que serviriam como pontos em que as palavras longas poderiam ser envolvidas, embora isso tenha sido alterado posteriormente para elementos.