Question

我有这个html布局，我试图在缩小窗口时截断文本。而且我正在使用bootstrap。我还添加了用于隐藏溢出文本的CSS部分。

但我得到了类似的东西：

.evLabel.form-control {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}

    <div style="clear:both;" class="firstFormDiv col-lg-6 col-md-6 col-sm-12 col-xs-12">
        <label class="lbl-no-padding col-lg-12 col-md-12 col-sm-12 col-xs-12" style="margin-top:5px">
        Label
        </label>
        <div class="f_lookup_191361 col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <div class="ev-input-group input-group" style="width:100%;">
                <span class="evLabel form-control col-sm-12 col-xs-12 " title="Some Title">Long Text That Needs to be Truncated</span>
                <span class="input-group-btn">
                    <button type="button" style="float:right;" class="btn inp-button edit_button" data-reditcontroller="/someUrl" true="">
                        <i class="fa fa-edit"></i>
                    </button>
                </span>
    </div>

Answer 1

<meta name="viewport" content="width=device-width, initial-scale=1">

在<head> </head>中使用元视口。

Answer 2

当您的文本超出特定宽度（限制）时，请应用文本溢出：省略号

示例：

 .txt-overflow-ellipsis {
    overflow:hidden;
    text-overflow:ellipsis;
    white-space: pre; /* or nowrap*/
    }

    <p class="txt-overflow-ellipsis">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>

Answer 3

我只是将代码从<span>更改为<input/>并将其设为readonly。为我工作。好的引导程序并不能很好地与<span>一起使用。至少在我的情况下。

使用Bootstrap截断文本

3 个答案: