带有@ Html.LabelFor的CSS text.overflow

Question

当我的bootstrap div列太小时，我想在 @ Html.LabelFor 的末尾插入省略号。

如果我使用静态文本，则

正确显示

  

Lorem ips ......

显示，但只要我使用 @ Html.LabelFor ，它就会将其剪切为

  

Lorem ips

没有......最后。

这是我的代码： -

    <style>
        .hideOverflow {
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            display: inline-block;
        }
    </style>

        <div class="row">
            <div class="col-md-1 hideOverflow">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
@*                @Html.LabelFor(model => model.Balloon)*@
            </div>
            <div class="col-md-4">
                @Html.EditorFor(model => model.Balloon)
                @Html.ValidationMessageFor(model => model.Balloon)
            </div>
        </div>

非常感谢任何帮助。

Answer 1

@Html.LabelFor呈现为<label> 您应该为<label>而不是div

编写css

如下所示

.hideOverflow label{
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        display: inline-block;
}