Question

我需要将文本显示为多行，我使用bootstrap，当宽度完成时分为2行，但是当我需要中断时可以断行。

@Html.ActionLink("Non-Owned & Hired Auto", "", "", new { id=1}, new { })

在上面的代码自动换行后，我希望在此之后断行并签名（＆amp;）。请指导我如何做到这一点。

我正在使用带有Razor View Engine的Asp.net Mvc。

以下是html视图代码。

<div class="col-lg-2 col-md-2 col-sm-12 col-xs-12">
    <aside id="sidebar">
        <nav id="side-nav">
               <ul class="nav nav-tabs" role="tablist">
                                  <li id="basicDetailMenu">@Html.ActionLink("Basic", "", "", new { id = 1}, new { })</li>
                                  <li id="generalInfoMenu">@Html.ActionLink("General", "", "", new { id=1}, new { })</li>
                  <li id="priorCarrierMenu">@Html.ActionLink("Prior Carrier", "", "", new { id=1}, new { })</li>
                  <li id="propertyCoverageMenu">@Html.ActionLink("Property Coverage", "", "", new { id=1}, new { })</li>
                          <li id="liabilityCoverageMenu">@Html.ActionLink("Liability Coverage", "", "", new { id=1}, new { })</li>
                  <li id="nonOwnedMenu">@Html.ActionLink("Non-Owned & Hired Auto", "", "", new { id=1}, new { })</li>
                                  <li id="liquorLiabilityMenu">@Html.ActionLink("Liquor Liability Coverage", "", "", new { id=1}, new { })</li>
                  <li><a href="#tab5" role="tab" data-toggle="tab">Additional</a></li>
                      <li><a href="#tab6" role="tab" data-toggle="tab">Other</a></li>
          </ul>
        </nav>
    </aside>
</div>

这是css

#sidebar{
    overflow:hidden;
    margin:0 0 15px;
}
#side-nav{
    overflow:hidden;
    display:block;
}
#side-nav ul{
    margin:0;
    padding:0;
    list-style:none;
}
#side-nav ul li{
    font-size:14px;
    border-top:1px solid #465667;
}
#side-nav ul li a{
    color:#9eabba;
    padding:15px;
    display:block;
    background:#293440;
    transition:.5s all;
    height:50px;
    line-height:18px;
}
#side-nav ul li a span{
    float:left;
}

Answer 1

在文本中添加回车符（为样式添加注释类名称）

@Html.ActionLink("Non-Owned & \rHired Auto", "", "", new { id = 1 }, new { @class = "newlinelink" })

然后用css来设置它的样式

.newlinelink {
    white-space:pre;
}

将显示分为多行以用于锚标记

1 个答案: