javascript - 带子 div 的省略号

Question

我有以下 html，它也绑定(bind)到 Bootstrap 弹出窗口(如果有任何区别的话)

<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%)时，文本被 chop ，我想将其显示为省略号。从我读过的内容来看，关键是要有 overflow:hidden with white-space:nowrap 以及 text-overflow 集。我变来变去，将它们移动到各种元素，但似乎没有任何效果。我在做一些明显错误的事情吗？如果问题出在更高级别，我可以发布更多 html 和 css。

fiddle 显示问题: http://jsfiddle.net/q1go1471/2/

Answer 1

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

只需修改它，它就可以工作了:

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

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

编辑:

要在最后仅创建 1 个省略号，请在您的 child 中使用 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/