在跨度内的文本中创建换行符

Question

我在应用程序中使用以下HTML：-

<span style="display:inline-block;white-space: pre-line">I would like to discuss this: {"incidentId":"TG00040","desc":"Patient Details","reportdetails":"Patient Name:Bhawana n Grade:10th n Teacher:Meeta"}</span>

但我无法在文本中创建换行符。我也尝试过使用\n、\r和br标记，但似乎没有任何问题。预期输出为：-

我想讨论一下：{quot；偶发事件Id"："TG00040"，"desc"："患者详细信息"，"报告详细信息"："病人姓名：Bhawana
年级：10年级
老师：Meeta"}

Answer 1

如果span中显示的数据包含字符n，并且在dom 中显示之前无法对其进行修改

您可以使用一个简单的js函数来用<br/>替换所有出现的n

var span = document.getElementById('my-data');
span.innerHTML = span.innerHTML.replaceAll('\n', '<br/>');

<span id="my-data">I would like to discuss this: {"incidentId":"TG00040","desc":"Patient Details","reportdetails":"Patient Name:Bhawana n Grade:10th n Teacher:Meeta"}</span>

在替换innerHTML时，只需小心掌握dom修改。这里没有风险，但如果你有基于用户输入的替换，你可以有xss问题

Answer 2

使用<br>而不是n。你想要这样的换行输出吗？

<span style="display:inline-block;white-space: pre-line">I would like to discuss this: {"incidentId":"TG00040","desc":"Patient Details","reportdetails":"Patient Name:Bhawana <br> Grade:10th <br> Teacher:Meeta"}</span>