在html页面填入字符串，\n换行不起作用，怎么办？

Posted 2023-04-06

参考技术A CSS white-space 属性

可以在DOM元素中使用white-space: pre-line;这样在html页面填入字符串，\n换行就起作用了。

jquery数据表自动换行不起作用

【中文标题】jquery数据表自动换行不起作用

【英文标题】：jquery datatables word wrap not working

【发布时间】：2016-10-22 16:26:33

【问题描述】：

如果值太长，我的数据表的列看起来会更宽。

我关注this 和this。 并设置宽度：

aTable = $("#printdata").dataTable(
     "bAutoWidth" : false,
     "bRetrieve"  : true,
     "scrollY": 200,
     "scrollX": true,
     "deferRender": true,
     "scroller": 
          loadingIndicator: true
          ,
     "bServerSide": true,
     "bProcessing": true,
     "sAjaxSource": 'show2ndsampling.php',
     "fnServerData": function (sSource,aoData,fnCallback)
          $.ajax(
                   "dataType":'json',
                   "type":'POST',
                   "url":sSource,
                   "data":aoData,
                   "success":function(json)
                          fnCallback(json);
                          
                   );
          ,
    "order"  : [[1,"desc"]],
    "aoColumns"  : [
    /*serial*/ "width": "30%", target : 3 
    ]

但是我的数据表没有变化。

【问题讨论】：

表示你的单词中没有空格。这就是发生这种情况的原因。

word 有空格时自动换行。

请发布您的完整数据表初始化代码

【参考方案1】：

我会这样做

table.dataTable tbody td 
  word-break: break-word;
  vertical-align: top;

演示 -> http://jsfiddle.net/qh63k1sg/

这暗示 autoWidth 设置为 false 并且您已为列指定了固定宽度（如在演示中和 OP 所描述的那样，他对 aoColumns / columns 所做的）。

【参考方案2】：

现在，我可以告诉你，显示数据的最佳方式是修改你的输出。

意思是：

如果您基于sql query 创建响应 -> 您应该优化 它并在您的查询中添加一个空格。 如果您在模板中执行此操作 -> 在模板部分准备数据，例如 PHP 上的示例 如果你在前端部分做，用JS方式做。

PHP方式：

$result = array( /* your result */);
foreach($result as &$answer )
   $answer = implode( ", ", explode( ",", $answer) );

JS方式：

var result = [/* your result */];
for( var index = 0; index < result.length; i++ )
  result[index] = result[index].split(",").join(", ");

【参考方案3】：

您可以使用 css 解决此问题。

table /* give class of table*/

   table-layout: fixed;


table td

  word-wrap:break-word;   
  overflow: hidden;