带有儿童 div 的省略号

Question

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

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

Answer 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/