jQuery Mobile-如何格式化分割列表項中的字符串？

Question

我需要對齊3個不同的字符串在拆分列表項（注意，其他項目是刪除彈出）

該UI是動態$('#bonusProductList').append(st1+st2+st3);

所以不管什麼字符串S1，S2或尺寸S3 ，我希望它顯示均勻。

S11 ========= S222222222222 = S333333

S1 ========== S222 ========== S3333

（代替= =，空格）

做什麼最好的方法是？

謝謝！

Answer 1

你可以每個L1內使用3列格：

DEMO FIDDLE

我使用來自一個數組的假數據，然後動態地創建與3串放在列表項在jQM 3列網格內：

var thedata = [ 
    ['S11', 'S222222222222', 'S333333' ], 
    ['S1', 'S2222222', 'S33333333'], 
    ['S11111', 'S22222222222', 'S3333'], 
    ['S1111111', 'S2', 'S3333333333'] 
]; 

$("#page1").on("pageinit", function(){  
    for (var i = 0; i < 4; i++) {   
     var li = $('<li><a href="#"><div class="ui-grid-b"><div class="ui-block-a"><div class="overflowtext">' + thedata[i][0] +'</div></div><div class="ui-block-b"><div class="overflowtext">' + thedata[i][2] +'</div></div><div class="ui-block-c"><div class="overflowtext">' + thedata[i][3] +'</div></div></div></a><a href="#popup" data-rel="popup" data-position-to="window" data-transition="pop"></a></li>'); 
     $('#bonusProductList').append(li);  
    }    
    $('#bonusProductList').listview('refresh');  
}); 

更新：添加CSS以截斷文本時，s creen變得狹窄：

.overflowtext { 
    overflow: hidden; 
    text-overflow: ellipsis; 
} 

對於自動換行，而不是截斷時，CSS變爲：

.overflowtext { 
    padding: 4px; 
    white-space: normal;  
} 

如果你想要的字與沒有空格文本換或者你想打破長的話：

.overflowtext { 
    padding: 4px; 
    white-space: pre;   /* CSS 2.0 */ 
    white-space: pre-wrap;  /* CSS 2.1 */ 
    white-space: pre-line;  /* CSS 3.0 */ 
    white-space: -pre-wrap;  /* Opera 4-6 */ 
    white-space: -o-pre-wrap; /* Opera 7 */ 
    white-space: -moz-pre-wrap; /* Mozilla */ 
    white-space: -hp-pre-wrap; /* HP Printers */ 
    word-wrap: break-word;  /* IE 5+ */ 
} 

自動換DEMO，或斷詞DEMO 2

JQM電網文檔可以在這裏找到：http://view.jquerymobile.com/1.3.2/dist/demos/widgets/grids/