以编程方式向跨度内的文本添加 元素不会中断行

Question

我使用 this 解决方案向我的网页添加工具提示。该应用程序是一个带有 Razor 页面的 MVC ASP.NET 应用程序。我希望工具提示的文本有换行符 ( )。这可以通过在文本中添加 HTML   来完成。这很好用，但是，我在页面顶部有一个函数（见下文），它呈现一个字符串，该字符串使用  -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 Name 2 Name 3 ".

呈现工具提示的代码如下：

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

问题是   不起作用，当工具提示显示我看到硬编码   作为字符串的一部分时，我希望结果看起来像：
姓名 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.

Answer 1

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

@Shashank Gb 让我开始思考。首先，我使用了开发人员工具，但输出的字符串显示为广告“名称 1   名称 2 ”

所以我想说没有错。但是，当我使用“查看页面源代码”时，我看到   呈现为 <br;&gt

我的解决方案是使用@Html.Raw，这阻止了 HTML  -标签的转换：

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

感谢您的帮助。

Answer 2

您在回答中发现了正确的问题，但这不是正确的解决方案。您的解决方案存在危险，如果名称包含任何 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>

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

Programmatically added <br>-element to text inside a span is not breaking the line

html

css

line-breaks

razor-pages