newline 相关问题

换行符是指表示文本换行符的字符序列（也称为行尾，EOL或换行符）。不同的操作系统具有不同的换行顺序。

所以这就是我所拥有的：这就是我所拥有的： <path class="..." onmousemove="show_tooltip(event,'very long text \\\n I would like to linebreak')" onmouseout="hide_tooltip()" d="..."/> <rect class="tooltip_bg" id="tooltip_bg" ... /> <text class="tooltip" id="tooltip" ...>Tooltip</text> <script> <![CDATA[ function show_tooltip(e,text) { var tt = document.getElementById('tooltip'); var bg = document.getElementById('tooltip_bg'); // set position ... tt.textContent=text; bg.setAttribute('width',tt.getBBox().width+10); bg.setAttribute('height',tt.getBBox().height+6); // set visibility ... } ... 现在我的很长的工具提示文本没有换行符，即使我使用alert();它告诉我文本实际上有两行。（虽然它包含一个“\”，我该如何删除它？）我无法让 CDATA 在任何地方工作。这不是 SVG 1.1 支持的。 SVG 1.2 确实有 textArea 元素，具有自动换行功能，但并非在所有浏览器中都实现。 SVG 2 不打算实现 textArea，但它确实有自动换行文本。但是，鉴于您已经知道应该在哪里换行，您可以将文本分成多个 <tspan>，每个x="0" 和 dy="1.4em" 来模拟实际的文本行。例如： <g transform="translate(123 456)"> <text x="0" y="0"> <tspan x="0" dy="1.2em">very long text</tspan> <tspan x="0" dy="1.2em">I would like to linebreak</tspan> </text> </g> 当然，由于您想通过 JavaScript 执行此操作，因此您必须手动创建每个元素并将其插入到 DOM 中。我想你已经设法解决了它，但如果有人正在寻找类似的解决方案，那么这对我有用： g.append('svg:text') .attr('x', 0) .attr('y', 30) .attr('class', 'id') .append('svg:tspan') .attr('x', 0) .attr('dy', 5) .text(function(d) { return d.name; }) .append('svg:tspan') .attr('x', 0) .attr('dy', 20) .text(function(d) { return d.sname; }) .append('svg:tspan') .attr('x', 0) .attr('dy', 20) .text(function(d) { return d.idcode; }) 有 3 行用换行符分隔。使用 tspan 解决方案，假设您事先不知道在哪里放置换行符：您可以使用我在这里找到的这个不错的函数： http://bl.ocks.org/mbostock/7555321 自动为给定宽度（以像素为单位）的长文本 svg 进行换行。 function wrap(text, width) { text.each(function() { var text = d3.select(this), words = text.text().split(/\s+/).reverse(), word, line = [], lineNumber = 0, lineHeight = 1.1, // ems y = text.attr("y"), dy = parseFloat(text.attr("dy")) || 0, tspan = text.text(null).append("tspan").attr("x", 0).attr("y", y).attr("dy", dy + "em"); while (word = words.pop()) { line.push(word); tspan.text(line.join(" ")); if (tspan.node().getComputedTextLength() > width) { line.pop(); tspan.text(line.join(" ")); line = [word]; tspan = text.append("tspan").attr("x", 0).attr("y", y).attr("dy", ++lineNumber * lineHeight + dy + "em").text(word); } } }); } 使用 HTML 而不是 javascript 限制：SVG渲染器必须支持HTML渲染例如，inkscape 无法渲染此类 SVG 文件 <html> <head><style> * { margin: 0; padding: 0; } </style></head> <body> <h1>svg foreignObject to embed html</h1> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300" x="0" y="0" height="300" width="300" > <circle r="142" cx="150" cy="150" fill="none" stroke="#000000" stroke-width="2" /> <foreignObject x="50" y="50" width="200" height="200" > <div xmlns="http://www.w3.org/1999/xhtml" style=" width: 196px; height: 196px; border: solid 2px #000000; font-size: 32px; overflow: auto; /* scroll */ " > <p>this is html in svg 1</p> <p>this is html in svg 2</p> <p>this is html in svg 3</p> <p>this is html in svg 4</p> </div> </foreignObject> </svg> </body></html> 我认为这符合你的要求： function ShowTooltip(evt, mouseovertext){ // Make tooltip text var tooltip_text = tt.childNodes.item(1); var words = mouseovertext.split("\\\n"); var max_length = 0; for (var i=0; i<3; i++){ tooltip_text.childNodes.item(i).firstChild.data = i<words.length ? words[i] : " "; length = tooltip_text.childNodes.item(i).getComputedTextLength(); if (length > max_length) {max_length = length;} } var x = evt.clientX + 14 + max_length/2; var y = evt.clientY + 29; tt.setAttributeNS(null,"transform", "translate(" + x + " " + y + ")") // Make tooltip background bg.setAttributeNS(null,"width", max_length+15); bg.setAttributeNS(null,"height", words.length*15+6); bg.setAttributeNS(null,"x",evt.clientX+8); bg.setAttributeNS(null,"y",evt.clientY+14); // Show everything tt.setAttributeNS(null,"visibility","visible"); bg.setAttributeNS(null,"visibility","visible"); } 它在 \\\n 上分割文本，并将每个片段放入一个 tspan 中。然后它根据文本的最长长度和行数计算所需框的大小。您还需要更改工具提示文本元素以包含三个 tspan： <g id="tooltip" visibility="hidden"> <text><tspan>x</tspan><tspan x="0" dy="15">x</tspan><tspan x="0" dy="15">x</tspan></text> </g> 这假设您的行数永远不会超过三行。如果您想要超过三行，您可以添加更多 tspan 并增加 for 循环的长度。我对@steco 的解决方案进行了一些调整，将依赖项从 d3 切换到 jquery 并将文本元素的 height 添加为参数 function wrap(text, width, height) { text.each(function(idx,elem) { var text = $(elem); text.attr("dy",height); var words = text.text().split(/\s+/).reverse(), word, line = [], lineNumber = 0, lineHeight = 1.1, // ems y = text.attr("y"), dy = parseFloat( text.attr("dy") ), tspan = text.text(null).append("tspan").attr("x", 0).attr("y", y).attr("dy", dy + "em"); while (word = words.pop()) { line.push(word); tspan.text(line.join(" ")); if (elem.getComputedTextLength() > width) { line.pop(); tspan.text(line.join(" ")); line = [word]; tspan = text.append("tspan").attr("x", 0).attr("y", y).attr("dy", ++lineNumber * lineHeight + dy + "em").text(word); } } }); } 有关的解决方案不适用于我的情况，因为我需要在我的 React 应用程序中使用动态解决方法（特别是我在多语言应用程序上工作，每种语言文本的断线也可能不同）。因此，我在需要换行的文本中使用了 \n，然后使用 map 方法使用 tspan 元素创建多行文本，其中我们有一个新行。 const SvgComponent = ({ text }) => { // Split the text into an array of lines based on line breaks ("\n") const lines = text.split('\n'); return ( <svg width="200" height="200"> {lines.map((line, index) => ( // Use your desired x and y coordinates and line space <text key={index} x="10" y={10 + index * 20}> <tspan>{line}</tspan> </text> ))} </svg> ); }; export default SvgComponent; 当您将带有换行符的文本作为 text prop 传递给此组件时，它将在 SVG 中的新行上渲染每行文本。例如： <SvgComponent text="Line 1\nLine 2\nLine 3" />

javascript svg newline line-breaks

回答 7 投票 0

正则表达式匹配超过 2 个空格但不匹配新行

我想替换字符串中所有超过 2 个空格，但不是新行，我有这个正则表达式： \s{2,} 但它也匹配新行。如何只匹配 2 个或更多空格而不匹配新的 l...

c# .net regex newline whitespace

回答 3 投票 0

如何迭代包含空格和换行符的文本文件，对每个字符串执行函数，并以原始格式再次打印？

我需要浏览类似格式的文本文件，如下所示：火矮人石摇滚啤酒箭狮子剑盾拱石龙金银大厅高脚杯胸斧 Axe 后面有一个换行符(&q...

c string io newline

回答 1 投票 0

如何防止scanner.next()包含换行符？

我试图使用 Scanner.next() 简单地读取文本文件中的单词，分隔符等于“”，但扫描仪包含带有令牌的换行符/回车符。我已经在互联网上搜索尝试...

java io newline delimiter

回答 3 投票 0

如何从 php 字符串中删除换行符和返回值？

php 变量包含以下字符串：文字文字2 项目1 项目2 我想删除所有...

php string newline

回答 11 投票 0

为什么在错误消息中发现了换行符，而实际上没有换行符？

此片段来自一个代码，旨在读取包含一百万个 pi 数字的文本文件，然后将所有六位连续数字提取到一个列表中（包括非唯一模式，以及...

python extract newline data-cleaning

回答 1 投票 0

如何在c中以换行符结束文件？

printf(" ”）；返回0； } ＃万一大家好，这些是我代码的最后几行，这就是在 C 中用换行符结束文件的方式吗？或者当他们说...时他们还有别的意思吗

c file newline

回答 1 投票 0

Python如何以二进制模式编写十六进制列表？

我有一串十六进制表示的文本，需要写入文件。写=“020203480A” 以 open("example.bin", "w") 作为文件：文件.write(chr(int(toW...

python-3.x windows hex newline

回答 2 投票 0

如何使用 Mac 在 CSV 文件中查找换行符样式（CRLF、CR 或 LF）

我需要使用 Mac 查找 csv 文件中使用的换行符类型。我已将 SPSS（统计软件）中的数据集导出到 CSV 文件。该 CSV 文件将被发送以通过...

macos csv newline line-breaks lf

回答 1 投票 0

git：追溯修复 CRLF 混乱

我错误地提交了一些以 CRLF 行结尾的文件。现在我设置 core.autocrlf = false 并在本地修复文件（在编辑器中）。有没有办法解决这个问题（例如，使用

git newline core.autocrlf

回答 1 投票 0

Firestore 在控制台 UI 中输入带有换行符的文本

我不知道如何在 Firestore Web UI 中输入带换行符的字符串。 JavaScript SDK 工作正常并保留换行符的读/写，但我需要手动编辑一些数据...

firebase google-cloud-firestore newline whitespace firebase-console

回答 2 投票 0

控制<br>标签给html/css的空间

我想在 HTML 5 中创建换行符，但控制它放置的间距。这是带有一个标签的样子：这是带有两个标签的样子：我想做点什么

html css newline

回答 1 投票 0

使用 grep 删除空行

我在 Linux 中尝试了 grep -v '^$' 但没有成功。该文件来自 Windows 文件系统。

text terminal grep newline

回答 18 投票 0

在一行原始字符串文字中包含换行符？

为了 Elasticsearch 的目的构建用于批量发布的字符串，我需要符合特定的换行格式。像这样的原始字符串文字可以完成这项工作：让 json = 格式！(r...

string rust newline rawstring

回答 1 投票 0

PostgreSQL 换行符

如何在PostgreSQL中使用换行符？这是我的实验中的错误脚本：选择'测试线1'||' '||'测试线2'; 我希望 sql 编辑器显示我的脚本 ab 的结果...

string postgresql newline

回答 3 投票 0

如何让测量对象正确计算最后一行没有 CRLF 的文件的行数？

根据我的理解，(Get-Content $file | Measure-Object).count 应该返回文件中的总行数。它对某些文件有效，但对于某些生成的文件，它给出的结果较少......

powershell count newline measure-object

回答 1 投票 0

附加换行符（即 ) 到在发布请求中发送的表单字段

我正在编写一些网络表单来测试学生编写的服务器作为练习。有些服务器并不完全符合课堂作业的预期规范。附加一个

javascript html http-post newline textinput

回答 2 投票 0

Java 中的模式/匹配器？

我有一段Java文本，我想使用模式和匹配器从中提取一些内容。这是我的程序：公共字符串 getItemsByType（字符串文本，字符串开始，字符串结束）{ S...

java regex newline

回答 2 投票 0

如何使用换行符' ' 在 f 字符串中格式化输出？

我尝试了这段代码：名称 = ['亚当'、'鲍勃'、'西里尔'] text = f"获奖者是： {' '.join(名称)}" 打印（文本）但是，'\' 不能在 f 字符串的 {...} 表达式部分内使用...

python python-3.x newline python-3.6 f-string

回答 8 投票 0

innerText.includes() 去除换行符

我正在为 Lojban 制作一个字典网站。它相对简单：加载预制的并将包含搜索查询的 innerText 的所有条目移动到 div# 我正在为 Lojban 制作一个字典网站。它相对简单：加载预制的 <div id="entries"> 并将包含搜索查询的 innerText 的所有条目移动到 div#results。问题没有包含字符串 u.a 的条目，但存在一个结果，其 innerText 包含 u\n\na。 innerText中的search(query)似乎正在删除换行符，尽管（a）它不应该这样做（b）运行document.querySelector("#results .entry").innerText.includes("u.a")返回false。尝试修复在 .replaceAll(/\n+g/, " ") 上运行 innerText，然后在其中找到搜索查询相关代码 const id = (x) => document.getElementById(x); function search(query) { var i = 0; var results = []; for (const entry of id("entries").childNodes) { const text = entry.innerText.replaceAll(/\n+/g, " "); if (text.includes(query)) { console.log(text, query, text.includes(query)); results.push(entry); i++; } } return [i, results]; } // ... lazy-loading function ... var timer; id("search").addEventListener("input", function() { clearTimeout(timer); id("status").innerHTML = "<span>.....</span>"; const q = id("search").value; let page = 0; if (observer) { observer.disconnect(); } timer = setTimeout(function() { if (q.length != 0) { const s = search(q); const l = String(s[0]); const res = s[1]; const pad = "<span>" + "0".repeat(5 - l.length) + "</span>"; id("status").innerHTML = pad + l; id("results").innerHTML = ""; // ... lazy-loading + url updating ... } else { id("status").innerHTML = ""; id("results").innerHTML = ""; page = 0; } }, 100); }); 通过在我的数据库生成程序中添加一个空格字符解决了这个问题。哈哈

javascript newline innertext

回答 1 投票 0

newline 相关问题

最新问题