以编程方式将 <br>-元素添加到跨度内的文本不会断行

Posted 2023-03-27

【中文标题】以编程方式将 <br>-元素添加到跨度内的文本不会断行

【英文标题】：Programmatically added <br>-element to text inside a span is not breaking the line

【发布时间】：2021-12-29 13:39:31

【问题描述】：

我使用this 解决方案向我的网页添加工具提示。该应用程序是一个带有 Razor 页面的 MVC ASP.NET 应用程序。我希望工具提示的文本有换行符 (<br/>)。这可以通过在文本中添加 html <br /> 来完成。这很好用，但是，我在页面顶部有一个函数（见下文），它呈现一个字符串，该字符串使用<br>-tags 添加到我的跨度元素中。

 private static string GetEmployeeList(ProjectSchedule ps)

    if (ps.Employees.Count > 0)
    
        string empList = string.Empty;
        foreach (var employee in ps.Employees)
        
            empList += employee.Name + "<br/>";
        
        return empList;
    
    return string.Empty;

函数的结果类似于："Name 1<br/>Name 2<br/>Name 3<br/>"。

渲染工具提示的代码如下：

 <div class="data-tooltip">
    Developers
    <span class="data-tooltiptext">@GetEmployeeList(item)</span>
 </div>

问题是<br/> 不起作用，当工具提示显示我看到硬编码的<br/> 作为字符串的一部分时，我预计结果类似于： 名称 1 名称 2 名称 3

使用的样式：

.data-tooltip 
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;


.data-tooltip .data-tooltiptext 
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 100%;
    left: 50%;
    margin-left: -60px;
    /* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */
    opacity: 0;
    transition: opacity 1s;



.data-tooltip .data-tooltiptext::after 
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: black transparent transparent transparent;


.data-tooltip:hover .data-tooltiptext 
    visibility: visible;
    opacity: 1;

结果：

有人知道如何解决这个问题吗？ TIA。

【问题讨论】：

尝试在函数GetEmployeeList中将</br>替换为\n

@ShashankGb 感谢回复，不幸的是，这不起作用。工具提示中没有可见的中断。我也尝试过（因为它是 c#）Environment.NewLine。那也不行。

工具提示本身看起来不错。看来问题出在功能上。

<br/> 如何显示在 html 页面中，据我所知这是不可能的。在浏览器中使用开发人员选项，请发布该工具提示的屏幕截图。会有帮助的。

【参考方案1】：

您已在答案中识别出正确的问题，但这不是正确的解决方案。您的解决方案存在危险，即如果名称包含任何 HTML，该名称也会被呈现，这会使您面临 HTML 和脚本注入攻击。

通常您应该避免使用@Html.Raw，并且不应该在模板之外生成 HTML。所有的 HTML 生成都应该直接在模板中进行：

<div class="data-tooltip">
    Developers
    <span class="data-tooltiptext">
    @foreach (var employee in item.Employees)
        @employee.Name<br/>
    </span>
</div>

【讨论】：

我没有想到，这是一个很好且有效的解决方案。我已根据您的建议更改了代码。

【参考方案2】：

毕竟，解决方案很简单（一如既往）。

@Shashank Gb 让我开始思考。首先我使用了开发者工具，但是输出的字符串显示广告“Name 1 <br/> Name 2<br/>”

所以我想说没有错。但是，当我使用“查看页面源”时，我看到 <br/> 被渲染为 <br;&gt

我的解决方案是使用@Html.Raw，这阻止了HTML <br/>-tag 的转换：

<div class="data-tooltip">
  Developers
  <span class="data-tooltiptext">@Html.Raw(@GetEmployeeList(item))</span>
</div>

感谢您的帮助。