Question

我有以下html也绑定到bootstrap popover（如果这有任何区别）

<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;
        }

我的问题是当我缩小＆＃39; .event＆＃39;容器（比方说5％）文本被截断，我想将其显示为省略号。从我读过的内容来看，关键是溢出：隐藏着white-space：nowrap以及文本溢出集。我玩杂耍，将它们移动到各种元素，但似乎没有任何作用。我在做一些明显错误的事情？如果问题出现在更高的水平，我可以发布更多的html和CSS。

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

Answer 1

据我所知，您必须指定使text-overflow: ellipsis有效的宽度。

只需修改它就可以了：

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

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

修改

要在最后创建一个省略号，请在孩子中使用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/

与孩子div的省略号

1 个答案: