Принудительный перенос виджета описания

StackOverflow https://stackoverflow.com/questions/420076

  •  05-07-2019
  •  | 
  •  

Вопрос

Я пытаюсь получить описание в приложении 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 > элементы.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top