带有儿童 div 的省略号答案

【问题标题】：Ellipsis with children div带有儿童 div 的省略号
【发布时间】：2015-01-24 01:06:10
【问题描述】：

我有以下也绑定到引导弹出窗口的 html（如果这有什么不同的话）

<div class="event" style="top: 0%; width: 100%;">
  <span class="test">Layouts</span>
  <div class="value">
    test
  </div>

  <span class="test">Starts</span>
  <div class="value">2014/12/12, 11:00</div>

  <span class="test">Ends</span>
  <div class="value">2015/1/16, 00:00</div>
</div>

与关联的 scss：

& > div.event {
        // position: absolute;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        background-color: rgba(41, 128, 185,.7);
        outline: 1px solid rgba(155, 89, 182,1.0);
        min-height: 30px;
        color: white;
        // width: 100%;
        height: 30px;
        padding: 5px;
        z-index: 1;

        font-size: 0.7em;
        .test {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          float:left;
          // text-transform: uppercase;
          font-weight: 200;
          padding: 0;
        }

        .value {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          float:left;
          color: rgba(255,255,255,0.5);
          margin-bottom: 5px;

          i.fa-external-link {
            cursor: pointer;
            line-height: 23px;
          }
        }
        .value, .test {
          padding-right: 5px;
        }

我的问题是，当我缩小“.event”容器（可以说是 5%）时，文本会被截断，我想将其显示为省略号。从我读过的内容来看，关键是真的要溢出：用空白隐藏：nowrap 以及 text-overflow 集。我四处游荡，将它们移动到各种元素，但似乎没有任何效果。我在做一些明显错误的事情？如果问题出现在更高级别，我可以发布更多 html 和 css。

小提琴显示问题： http://jsfiddle.net/q1go1471/2/

【问题讨论】：

那是 CSS 还是 SCSS？如果您可以在 jsfiddle 中重现该问题，那么获得答案可能会更快。 (jsfiddle.net)

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

据我所知，您必须指定宽度才能使text-overflow: ellipsis 起作用。

只需修改它，它应该可以工作：

.value, .test {
    padding-right: 5px;
    width: 30px;
}

JSFiddle：http://jsfiddle.net/Ljo2eco9/

编辑：

要最后只创建 1 个省略号，请在您的孩子中使用 display: inline; 而不是 float: left。

.test {
    font-weight: 200;
    padding: 0;
}

.value {
    color: rgba(255,255,255,0.5);
    margin-bottom: 5px;
}

.value, .test {
    padding-right: 5px;
    display: inline;
}

JSFiddle：http://jsfiddle.net/Ljo2eco9/1/

【讨论】：

同意，但这不是我想要的。我希望最后只有 1 个省略号。