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

Question

我想在 highcharts 的工具提示中换行。我为此添加了 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 代码：

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

我浏览了以下链接并尝试了建议的解决方案，但似乎没有任何效果。 How can I add line break to html text without using any html tag

Give a line break without using <br/>

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

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) 我们用英语打断的地方可能不会留下目标语言的可翻译片段。

所以也许你应该编写一个简单的函数来在翻译后添加换行符，或者甚至设置工具提示来插入它自己的换行符，如果这是工具的固有特性的话——提示软件。