如何在不使用

时间:2017-05-16 19:25:04

标签: javascript html angularjs highcharts

我想在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和边缘浏览器因&lt;&gt;而对该字符串进行本地化符号。所以我需要找到一种不使用
标签来打破一条线的方法。我尝试过lte和gte来替换&lt;&gt;标签。它支持在所有浏览器中进行本地化,但不执行换行。

我甚至尝试过:

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

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

3 个答案:

答案 0 :(得分:0)

使用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个单独的工作。

(如果有效,请告诉我们,如果有的话,请告诉我们。)

答案 1 :(得分:0)

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

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

答案 2 :(得分:0)

也许在翻译后添加换行符

我意识到我之前的回答可能误解了您的问题,而您的问题实际上可能是首先将换行符放在首位。

请记住用另一种语言

(a)句子片段的长度可能与英语不同,

(b)我们用英语打破的地方可能不会为目的地语言留下可翻译的片段。

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