Question

我正在创建一个列表，我在列表中添加元素。现在，如果我在列表中添加一个没有换行符的长句，它就会超出范围。

The third element, this is how it looks after being added to the list

That is the actual text thats supposed to be added to the list

我想要的是，如果单词太长，我会明确地打破它，以便它在下一行中出现。我不知道该怎么做。

{
            cls:'notesList',
            xtype:'list',
            id:'notesList',
            height:300,
            whitespace:pre-wrap,
            allowDeselect: false,
            style:'background-color: rgba(0,140,153,1.0);',
            itemTpl:'<table><tr><td width="3%"><img src="resources/images/user.png" width="20em" height="20em" /></td>' +
                '<td width = "60%" style="font-weight:bold;text-align:left;">{Author}</td>' +
                '<td width = "40%" style="font-weight:bold;text-align: right">{Name}</td></tr>'+
                '<tr><td colspan=3>{Text}</td></tr></table>'
        },

Answer 1

我曾经遇到过这个问题，我通过在文本容器中添加一些CSS来解决它。

使用列表中的itemCls config将CSS类添加到列表项中。

然后将以下内容添加到.css

中的此CSS类中

word-wrap: break-word;
overflow: hidden;
max-width: 247px;
width: 247px;

希望这有帮助

Answer 2

嘿@Knush将此说明添加到您的元素white-space:pre-wrap，您可以width指向input text。

例如，

进入style

....
items: [
{
    text: '<p class="your_class" face="Arial" size="2" style="text-align:center;white-space:pre-wrap;" >lkjsdlksdj ewiouwe iouiuio</p>',
    id: 'ce',
    handler: function() {
        stuff()
    },
},
 ]
...

或者来自CSS类

.your_label {
   width: 60px;
   white-space:pre-wrap;
}

我希望这会有所帮助。：）

换行列表在sencha

2 个答案: