Question

我在jQuery中添加以下内容。

    game_details_container.append('<div class="game_detail_peg"><table><tr><th class="game_detail_tr"><span class="game_detail_tr_round">'+innings_num+'</span> '+team_home+'</th> </tr><tr><td>'+inningsInfo['innings_pp_h']+'</td></tr></table></div>');

变量inningsInfo ['innings_pp_h']的文字包含换行符'\ n'标记。

然而，文本被设置为使其流动并且不遵守换行符。有没有办法解决这个问题。

任何人都可以就如何解决这个问题向我提出正确的方向吗？

Answer 1

如果你想要的是\n字符在渲染的HTML中创建换行符，你可以尝试：

game_details_container.append('<div class="game_detail_peg"><table><tr><th class="game_detail_tr"><span class="game_detail_tr_round">'
    + innings_num
    + '</span> ' 
    + team_home
    + '</th> </tr><tr><td>'
    + inningsInfo['innings_pp_h'].split("\n").join("<br />")
    + '</td></tr></table></div>'
);

HTML会忽略换行符，除非它们位于<pre>标记内。要强制换行，您需要使用<br>，<div>（或任何其他块级元素），或将您的内容放在<pre>标记内。

Answer 2

HTML的渲染会忽略换行符和重复的空格，因此您需要使用标记来实现相同的结果：

inningsInfo['innings_pp_h'].replace(/\n/g, '<br/>')

Answer 3

连接字符串是一团糟。改为使用模板。

var TEMPLATE = '<div class="game_detail_peg"><table><tr><th class="game_detail_tr"><span class="game_detail_tr_round">{{INNINGS_NUM}}</span>{{TEAM_HOME}}</th> </tr><tr><td>{{INNINGSINFO}}</td></tr></table></div>';

var renderedHtml = TEMPLATE.replace(/{{INNINGS_NUM}}/, innings_num)
                           .replace(/{{TEAM_HOME}}/, team_home)
                           .replace(/{{INNINGSINFO}}/, inningsInfo['innings_pp_h'].replace(/\n/g, '<br/>'));

game_details_container.append(renderedHtml);

更整洁，更容易理解。

在jQuery中使用\ n换行设置文本

3 个答案: