line-breaks 相关问题

所以这就是我所拥有的：这就是我所拥有的： <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

使用弹性容器和人工换行修复行高或间隙问题

我正在使用弹性容器和人工换行符来在需要时打断单词。我从来没有意识到它会导致线路之间产生额外的间隙。正如您在示例中看到的，空间 b...

css flexbox line-breaks

回答 1 投票 0

为什么我的文本视图在设置文本时不创建换行符，即使使用过吗？

我在 Android Studio 上使用 Kotlin 语言。我创建了一种方法，将保存的 txt 文件的内容显示在文本视图中。 textView.setText(stringBuilder.toString()).toString() 在...

android-studio kotlin textview line-breaks stringbuilder

回答 2 投票 0

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

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

macos csv newline line-breaks lf

回答 1 投票 0

如何配置 Jackson 在 Spring boot 项目中不处理换行符？

Body：我正在使用 Jackson 将 Java 对象序列化为 JSON 字符串。但是，我不希望 Jackson 转义 JSON 字符串中的换行符。如何配置 Jackson 不处理换行符？他...

java jackson line-breaks

回答 1 投票 0

从 Outlook Web 插件获取电子邮件正文时如何保留换行符

我目前正在开发一个 Outlook 插件来获取电子邮件正文并将其发布到外部 API。我遇到的问题是每次我使用 body.getAsync() 时，所有换行符都会被删除，...

javascript outlook outlook-addin line-breaks outlook-web-addins

回答 1 投票 0

如何在 MatLab 实时脚本中的代码输出之间添加换行符？

我在实时脚本单元中有以下代码： u = 符号单元；符号V_GS V_t_值 = 0.4*u.V; K_n_W_L_值 = 2*u.mA/u.V^2; %获取V_GS i_d_equation_saturation = 0.5*K_n_W_L_value*(V_GS - V_t_value)^2; 屁股...

matlab formatting format printf line-breaks

回答 1 投票 0

如何在DIV中的长单词中强制换行？

好吧，这真的让我很困惑。我在 div 中有一些内容，如下所示：这是测试。这是测试。这是测试。这是... 好吧，这真的让我很困惑。我在 div 中有一些内容，如下所示： <div style="background-color: green; width: 200px; height: 300px;"> Thisisatest.Thisisatest.Thisisatest.Thisisatest.Thisisatest.Thisisatest. </div> 但是，内容溢出了 DIV（如预期），因为“单词”太长。如何强制浏览器在必要时“破坏”单词以适应其中的所有内容？使用word-wrap:break-word; 它甚至可以在 IE6 中运行，这是一个惊喜。 word-wrap: break-word 已替换为 overflow-wrap: break-word;，适用于所有现代浏览器。 IE 作为一个死浏览器，将永远依赖已弃用且非标准的 word-wrap。 word-wrap 的现有用途今天仍然有效，因为根据规范它是 overflow-wrap 的别名。我不确定浏览器兼容性 word-break: break-all; 您还可以使用 <wbr> 标签 <wbr>（分词）的意思是：“浏览器可以在此处插入换行符，如果希望。”浏览器不认为换行不需要任何东西发生了。这可以添加到“跨浏览器”解决方案的已接受答案中。来源： http://kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/ http://css-tricks.com/snippets/css/prevent-long-urls-from-writing-out-of-container/ .your_element{ -ms-word-break: break-all; word-break: break-all; /* Non standard for webkit */ word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto; } 我只是在谷歌上搜索同样的问题，并发布了我的最终解决方案这里。这也与这个问题有关。您可以通过给 div 指定样式 word-wrap: break-word 轻松地做到这一点（并且您可能还需要设置其宽度）。 div { word-wrap: break-word; /* All browsers since IE 5.5+ */ overflow-wrap: break-word; /* Renamed property in CSS3 draft spec */ width: 100%; } 但是，对于餐桌，您还需要申请：table-layout: fixed。这意味着列宽不再是可变的，而是仅根据第一行中的列宽（或通过指定宽度）进行定义。在这里阅读更多内容。示例代码： table { table-layout: fixed; width: 100%; } table td { word-wrap: break-word; /* All browsers since IE 5.5+ */ overflow-wrap: break-word; /* Renamed property in CSS3 draft spec */ }  是称为零宽度空格 (ZWSP) 的 unicode 字符的 HTML 实体，它是指定换行机会的不可见字符。同样，连字符的目的是指定单词边界内的换行机会。发现在使用 Flexbox 并依赖于 width: auto 时，使用以下内容可以在大多数主要浏览器（Chrome、IE、Safari iOS/OSX）上运行，但 Firefox (v50.0.2) 除外。 .your_element { word-wrap: break-word; overflow-wrap: break-word; word-break: break-word; } 注意：如果您不使用自动前缀程序，您可能需要添加浏览器供应商前缀。另一件事需要注意的是使用   作为间距的文本可能会导致单词中间换行。浏览器保留空白。文本将在必要时换行，并换行 .pre-wrap { white-space: pre-wrap; word-break: break-word; } 演示 td { word-break: break-word; white-space: pre-wrap; -moz-white-space: pre-wrap; } table { width: 100px; border: 1px solid black; display: block; } <table> <tr><th>list</th> <td> 1.longtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtext 2.breaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreakline </td> </tr> </table> CSS word-wrap:break-word;，在 FireFox 3.6.3 中测试删除white-space: nowrap，如果有的话。实施： white-space: inherit; word-break: break-word; 我用下面的代码解决了我的问题。 display: table-caption; 来自MDN： overflow-wrap CSS 属性指定浏览器是否应在单词中插入换行符以防止文本溢出其内容框。与 word-break 相比，overflow-wrap 仅当整个单词无法放置在自己的行上而不溢出时才会创建中断。所以你可以使用： overflow-wrap: break-word; 我可以使用吗？首先您应该确定元素的宽度。例如： #sampleDiv{ width: 80%; word-wrap:break-word; } <div id="sampleDiv">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div> 这样当文本达到元素宽度时，它就会被分解成行。正如 @davidcondrey 的回复中提到的，不仅有 ZWSP，还有 SHY  ，可以用在很长的构造词中（想想德语或荷兰语），必须当场打破you想要就这样吧。不可见，但它会在需要时给出连字符，从而最大限度地保持单词连接和行填充。这样，单词 luchthavenpolitieagent 可能会被标记为 luchthavenpolitieagent，它给出的部分比单词的音节更长。虽然我从未读过任何有关它的官方内容，但这些软连字符在浏览器中设法比构造的单个单词中的官方连字符获得更高的优先级（if它们有一些扩展）。在实践中，没有任何浏览器能够自行打破如此长的构造单词；在较小的屏幕上，会产生一个新行，或者在某些情况下甚至是一个单字行（例如当其中两个构建的单词跟进时）。仅供参考：荷兰语中机场警察的意思 word-break：normal似乎比word-break：break-word更好用，因为break-word会破坏诸如EN之类的首字母 word-break: normal .word-break { word-break: keep-all; word-wrap: break-word; } 我检查了 Chrome、Firefox：word-wrap: break-word、overflow-wrap: break-word 对我不起作用。有效的是： overflow-wrap: anywhere; 或 word-break: break-all; 为此，您可以使用网格系统。 <div class="container" style="background-color: green; width: 200px; height: 300px;"> <div class="row">Thisisatest.Thisisatest.Thisisatest.</div> <div class="row">Thisisatest.Thisisatest.Thisisatest.</div> </div> 这样做： <div id="sampleDiv">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div> #sampleDiv{ overflow-wrap: break-word; } 按照我们的风格尝试一下 white-space: normal;

html css line-breaks

回答 19 投票 0

我正在尝试在一行中打印一个短语，但我的 do-while 循环中有一个额外的换行符，我想知道为什么？

晚上好，我创建了一个单词搜索程序，我的输出应采用“A palavra % está no texto！”的形式或“A palavra % não está no texto!”，但它看起来像这样：一个

c matrix char printf line-breaks

回答 1 投票 0

移除使用 PHP 换行

我准备了文本区域的多行内容，如下所示：第一行第二行现在，当稍后用 PHP 处理表单数据时，我正在努力...

php forms line-breaks

回答 1 投票 0

如何修复大 csv 文件中的中换行符

我有一个来自数据库的 3GB csv 文件，每一行应该是这样的条目：数字（3 到 8 位的整数）；数字（2 到 8 位的整数）；字符串；日期时间；字符串；字符串

regex csv line-breaks

回答 1 投票 0

为什么“std::cout << char() << std::endl;" not even print a new line on Compiler Explorer?

这段代码， #包括 int main() { std::cout << "---" << std::endl; std::cout << char() << std::endl; std::cout << "---"...

c++ iostream line-breaks cout compiler-explorer

回答 1 投票 0

为什么“std::cout << char() << std::endl;" not even print a new line?

这段代码， #包括 int main() { std::cout << "---" << std::endl; std::cout << char() << std::endl; std::cout << "---"...

c++ newline iostream line-breaks cout

回答 1 投票 0

如何删除批处理文件中的新行？

我正在处理批处理文件并导出到文本文件。看起来一切都很好，但是当我打开文本文件时，许多新行中断。所以，我想删除它们。 @回声关闭 setlocal 启用延迟扩展（

batch-file text-files line-breaks wmic system-information

回答 3 投票 0

line-breaks 相关问题

最新问题