如何在 Chrome 中设置文本换行 class

Question

I want use below code to enable line break for the cell.

Grid6Obj.getRowTemplate().setClass("text", "wrap");

But when I opened the page in chrome and it didn't work. I debug the page and the html is like below.

<span id="aw36-row-0" class="aw-templates-list aw-text-wrap aw-grid-row aw-row-0 aw-rows-normal aw-alternate-even "><span id="aw36-row-0-start" class="aw-row-start " style="width:0px;"></span><span id="aw36-cell-0-0" class="aw-item-template aw-templates-cell aw-grid-cell aw-column-0 aw-cells-normal " style="border-right:1px  solid #ccc;border-bottom:1px  solid #ccc;" title="">123 456 678</span><span id="aw36-cell-1-0" class="aw-item-template aw-templates-cell aw-grid-cell aw-column-1 aw-cells-normal " style="border-right:1px  solid #ccc;border-bottom:1px  solid #ccc;" title="">12</span><span id="aw36-row-0-end" class="aw-item-template aw-grid-cell aw-column-space "><span id="aw36-row-0-end-box" class="aw-item-box "></span></span></span>

It set the class but the value "123 456 678" is still in one line. Is this because Chrome didn't suppose this class?Then what's the correct way to archieve it? Thx.

Answer 1

I did some research for you, there are 3 easy options. wrap your data in PRE tags

<PRE>
123 
456 
678
</PRE>

or in your aw.css file you could change the css on line 17

.aw-text-normal .aw-templates-cell, .aw-text-normal .aw-templates-text, .aw-text-normal .aw-templates-link, .aw-text-normal .aw-item-box {
    white-space:nowrap;
}

Which is set to nowrap, changing this to pre will allow you to hard break your lines. Though this solution will change all cells to type PRE

.aw-item-box {
    white-space:pre
}

Alternatively you could mutate your data to this:

"Line1 \r\n Line 2"