如何在 Chrome 中设置文本换行类答案

【问题标题】：How to set text-wrap class in Chrome如何在 Chrome 中设置文本换行类
【发布时间】：2021-04-29 15:18:22
【问题描述】：

我想使用下面的代码为单元格启用换行符。

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

但是当我在 chrome 中打开页面时，它不起作用。我调试页面，html如下。

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

它设置了类，但值“123 456 678”仍在一行中。这是因为 Chrome 没有假设这个类吗？那么归档它的正确方法是什么？谢谢。

【问题讨论】：

你使用的是什么框架？ ActiveWidgets？
如果我没记错的话，ActiveWidgets 会附加 ax
是的。我认为是 ActiveWidgets。
所以我们需要一个 minimal reproducible example 使用 [<>] 堆栈 sn-p

标签： html css google-chrome

【解决方案1】：

我为您做了一些研究，有 3 个简单的选项。将数据包装在 PRE 标记中

<PRE>
123 
456 
678
</PRE>

或者在您的 aw.css 文件中，您可以在第 17 行更改 css

.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;
}

设置为 nowrap，将其更改为 pre 将允许您硬断线。尽管此解决方案会将所有单元格更改为 PRE 类型

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

或者，您可以将数据更改为：

"Line1 \r\n Line 2"

【讨论】：