Принудительный перенос виджета описания
Вопрос
Я пытаюсь получить описание в приложении XUL для переноса, даже если оно содержит длинные строки.
Например, если я сохраню следующее в виде файла .xul и открою его в Firefox, он выглядит нормально и переносится соответствующим образом:
<?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>
Однако, если я удаляю пробелы в большой строке, она не переносится, и я просто получаю полосу прокрутки, чтобы увидеть строку:
<?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>
Можно ли каким-либо образом использовать CSS или что-либо еще, чтобы принудительно перенести длинную строку, когда она достигает предела в 200 пикселей? Р>
Решение
Firefox 3.1 поддерживает это: http://www.css3.info/preview/word -wrap / р>
Свойство word-wrap было изобретено Microsoft и добавлено в CSS3. Он позволяет разбивать длинные слова и переносить их на следующую строку. Он принимает два значения; нормальное или ключевое слово. В настоящее время это поддерживается в IE, Safari и Firefox 3.1 (Alpha).
В старых (и текущих) версиях Firefox не существует стандартного способа (Google был моим другом) сделать это. Некоторые предлагают использовать небольшой скрипт, который добавляет <br />
в середине слова. Используйте word-wrap: break-word и надейтесь, что пользователи в конечном итоге обновятся.
Другие советы
Изначально ChatZilla использовался для разбрасывания пустых < img > элементы в выводе, которые будут служить точками, в которые могут переноситься длинные слова, хотя позже это было изменено на < wbr > элементы. р>