如何在不使用<br/>的情况下强制换行

Question

我想在高图表的工具提示中换行。我添加了 br 标签来这样做，它工作正常。唯一的问题是我也在尝试对该特定字符串执行本地化。

gettextCatalog.getString("Click the bar to view <br/>detailed information about <br/>events for the time range <br/>represented by the bar.");

使用 br 标记可防止 IE11 和边缘浏览器由于<>符号而本地化该字符串。所以我需要找到一种不使用标签的换
行方法。我尝试了 lte 和 gte 来替换<>标签。它在所有浏览器中启用本地化，但不执行换行。

我什至尝试过：

gettextCatalog.getString("Click the bar to view n detailed information about <br/>events for the time range");

higcharts-tooltip code：

tooltip: {
                                        formatter: function () {
                                            var content;
                                            var nameLabel;
                                            content = "<strong>" + gettextCatalog.getString("Event Time") + ":</strong> " + Highcharts.dateFormat("%H:%M:%S", this.x) + "<br/>";
                                            nameLabel = this.series.name;
                                            if (nameLabel === highCardinalitySelector) {
                                                nameLabel = otherLabel;
                                            }
                                            content += "<strong>" + $scope.eventfieldName + ":</strong> " + nameLabel + "<br/><strong>" + eventCountTypeLabel + ":</strong> " + this.y.toFixed(decimals) + "<br/>"; // jscs:ignore maximumLineLength
                                            if ($scope.chartType == "Stacked Bar 2D") {
                                                content += "<strong>" + gettextCatalog.getString("Total") + ":</strong> " + this.point.stackTotal.toFixed(decimals) + "<br/>";
                                            }
                                            content += "<br/>";
                                            content +=  gettextCatalog.getString("Click the bar to view" + String.fromCharCode(13) + String.fromCharCode(10) + "n detailed information about nevents for the time range n represented by the bar."); // jscs:ignore maximumLineLength
                                            return content;
                                        },
                                        style: {
                                            color: "#333",
                                            fontSize: "11px",
                                            padding: "8px"
                                        },
                                        borderColor: "#CCC",
                                        followPointer: true
                                    },

我浏览了以下链接并尝试了建议的解决方案，但似乎没有任何效果。如何在不使用任何 html 标签的情况下向 html 文本添加换行符

在不使用
的情况下给出换行符

还有其他方法可以在字符串中添加换行符吗？请帮忙。

Answer 1

String.fromCharCode(10(

Javascript String.fromCharCode(( 函数从 Unicode 字符代码生成一个字符串。在您的情况下，相关字符代码可能是 10，换行。

所以你的陈述会变成

gettextCatalog.getString(
  "Click the bar to view" + String.fromCharCode(10) +
  "detailed information about" + String.fromCharCode(10) +
  "events for the time range" + String.fromCharCode(10) +
  "represented by the bar.");

如果这不起作用，你可以尝试 String.fromCharCode(13(。

如果即使这样也不起作用，您可能会绝望地尝试 13 然后是 10。

gettextCatalog.getString(
  "Click the bar to view" 
  + String.fromCharCode(13) 
  + String.fromCharCode(10) 
  + "detailed information about" 
  + String.fromCharCode(13)
  + String.fromCharCode(10)
  + "events for the time range" 
  + String.fromCharCode(13) 
  + String.fromCharCode(10) 
  + "represented by the bar.");

哪一个效果最好取决于工具提示显示处理程序的期望。很可能 10 个本身会起作用。

(请让我们知道它是否有效，如果是，是哪一个。

Answer 2

您可以在包含字符串的元素上设置样式white-space: pre-line，然后只使用常规换行符(在 Javascript 中n(。我不知道这是否适用于您正在使用的翻译库。

最好在工具提示元素上设置最大宽度，并且根本不使用硬编码换行符。

Answer 3

也许在翻译后添加换行符

我

意识到我之前的回答可能误解了你的问题，你的问题实际上可能在于选择先放换行符。

记住用另一种语言

(a( 句子片段的长度可能与英文不同，以及

(b( 我们中断英语的地方不得为目标语言留下可翻译的片段。

因此，也许您应该编写一个简单的函数来在翻译后添加换行符，或者如果这是工具提示软件的固有功能，甚至将工具提示设置为插入自己的换行符。