DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> XML學習教程 >> XML詳解 >> XUL技巧之自動換行的description
XUL技巧之自動換行的description
編輯:XML詳解     

這個也可以說是技巧,也可以說是因為我的頑固而帶來的教訓,呵呵。

  XUL有兩個用於顯示文本的元素,label和description,按照設計來講,label主要用來顯示單行文本,而description用來顯示塊文本。

  description有兩種賦值方式,一種是為value屬性賦值,一種是以子元素的方式放在description裡面。最重要的一點,通過第一種方式賦值,無論怎麼調整都是只能顯示為單行的,多余的部分要麼被截取掉,要麼可以通過其它方式省略化顯示;而只有通過第二種方式,才可以實現塊文本的自動換行。

  這就是我愚蠢的地方,在MDC上反復的看這段說明,可卻就是轉不過彎來。

  比如現在xul有一代碼片段如下所示:

  <xul:description id="desc">

  下面這種方式只能實現單行文本:

  document.getElementById("desc").value = "一段很長的文本。。。";

  下面這種方式才能實現自動換行:

  document.getElementById("desc").appendChild(document.createTextNode("一段很長的文本。。。"));

  下面就description補充說明幾點:

  不加任何顯示的話,description自動換行的范圍是這個容器,最大可能是整個窗口,只有當窗口的寬度小於文本的長度的時候才會有自動換行的效果。

  可以為description增加maxwidth=50這樣的屬性,或者style="max-width: 200px;"這樣的樣式,這樣就可以在指定的寬度實現自動換行。

  如果把description放到vbox裡面,以上規則不變,如果放到hbox裡面,自動換行的效果就沒有了,這是因為hbox在水平方向自動延伸嘛,呵呵。這時候只要在嵌套在hbox的description裡面增加 flex="1"屬性,就又自動換行啦。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved