引导模式中的文本溢出省略号

【问题标题】：Text-overflow ellipsis in bootstrap modal引导模式中的文本溢出省略号
【发布时间】：2017-09-04 07:25:24
【问题描述】：

我想要获得的是 Bootstrap 模态正文中很长的文本内容，放置在单行上，如果长于模态宽度，则以省略号结尾。

<div class="modal-body">
    <span>Some very very very long text in the modal.</span>
</div>

【问题讨论】：

标签： css twitter-bootstrap twitter-bootstrap-3 modal-dialog

【解决方案1】：

试试：

CSS

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

HTML

<div class="modal-body">
  <div class="ellipsis">Some very very very long text in the modal.Some very very very long text in the modal.Some very very very long text in the modal.Some very very very long text in the modal.</div>
</div>

演示：http://jsfiddle.net/lotusgodkk/GCu2D/2084/

【讨论】：

Bootstrap 4 答案如下。

【解决方案2】：

对于 bootstrap 4，现在有 text-truncate 类可以做同样的事情。

<h3 class="text-truncate">Name</h3>

【讨论】：