Question

我需要在拆分列表项中对齐3个不同的字符串（请注意，另一个项目是删除弹出窗口）

Ul是动态的$('#bonusProductList').append(st1+st2+st3);

所以无论字符串s1，s2或s3的大小是多少，我希望它能够均匀显示。

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

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

（而不是=，空格）

最好的方法是什么？

谢谢！

Answer 1

您可以在每个LI中使用3列网格：

<强> DEMO FIDDLE

我正在使用数组中的伪数据，然后使用放置在jQM 3列网格中的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以在屏幕变窄时截断文本：

.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/

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

1 个答案: