截断引导网格中的文本答案

【问题标题】：Truncate text in bootstrap grid截断引导网格中的文本
【发布时间】：2016-12-17 01:24:23
【问题描述】：

我正在使用引导 col/grid 系统。如何截断 col 内的文本以使其强制为单行？我希望截断我的错误消息，使其与左侧的按钮保持在同一行（见图）。

<div class="row">
    <div class="col-md-3">

        <button class="btn btn-raised btn-primary btn-sm" ng-click="">Refresh</button>

        <div class="btn-group">
            <a ng-click="" class="btn btn-success btn-raised btn-sm">Build</a>
            <a  class="btn btn-success btn-raised dropdown-toggle btn-sm" data-toggle="dropdown"><span class="caret"></span></a>
            <ul class="dropdown-menu">
                <li><a href="">Action</a></li>
                <li><a href="">Another action</a></li>
                <li><a href="">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="">Separated link</a></li>
            </ul>
        </div> 

    </div>
    <div class="col-md-8">

            <div class="" ng-show="true" style="height:18px;">
                <span class=""><i class="fa fa-exclamation-circle text-danger" aria-hidden="true"></i></span>
                <span class="">
                    <i>{{errorMessage}}</i> <!-- I want to truncate this so that a the buttons and the error message are on the same row ...-->
                </span>
            </div>

    </div>
</div>

我尝试在错误消息的 div 和 span 上添加它，但它强制在图标下方显示文本

.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

【问题讨论】：

标记中的任何元素都没有 .truncate 类。查看所有作用于此标记的 CSS 代码也很有帮助，因为从 CSS 摘录中诊断问题可能是不可能的。如果您可以设置一个代码笔来展示您的问题，那就太好了。

标签： html css twitter-bootstrap truncate

【解决方案1】：

您需要为保存消息的元素添加一个“最大宽度”，以便您的 CSS 工作。 IE。

&lt;i style="max-width: 80%;"&gt;My extremely long error message&lt;/i&gt;

【讨论】：

【解决方案2】：

设置相同的 height 和 line-height 以只有一行：

.truncate {
  line-height: 20px;
  max-height: 20px;
  overflow: hidden;
  display:inline-block;
}

【讨论】：

【解决方案3】：

你可以使用分词，

<style>
.truncate {
    word-break: break-word;
}
</style>
<span class="truncate">
                <i>{{errorMessage}}</i> <!-- I want to truncate this so that a the buttons and the error message are on the same row ...-->
            </span>

【讨论】：

【解决方案4】：

借助 Bootstrap 4，您可以使用 text-truncate 类。

<div class="text-truncate" ng-show="true" style="height:18px;">
    <span class="">
        <i>{{errorMessage}}</i>
    </span>
</div>

【讨论】：