css - 文本溢出淡入淡出 - CSS

Question

这是我的 CSS 和 HTML 代码。

.column {
  float: left;
  width: 252px;
  padding-left: 1px;
  padding-bottom: 34px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
ul,
ol {
  list-style-type: none;
}
.items li {
  border-bottom: 1px solid red;
  padding: 7px 16px 4px;
  white-space: nowrap;
}
.items li.item--highlighted {
  background: #f0ce78;
}
.items li .item__title {
  font-size: 14px;
  font-weight: normal;
  text-transform: none;
  font-family: "Roboto", sans-serif;
}
.items li .item__meta__separator {
  display: inline-block;
  margin: 0 5px;
}
.items li .red {
  color: #ed1b2e;
}
.items li .info-bubble.info-bubble-bottom.info-bubble-bottom-left {
  left: 70px;
}
.meta {
  color: #9D9D9D;
  font-size: 11px;
}

<div id="salesInvoice4Columns" class="column column-4" style="width:px;">
  <ol class="items">

    <li id="saleInvoiceLink0">
      <h3 class="item__title">AUTO</h3>



      <div class="meta">

        <a id="saleInvoiceDocumentNumberLink" class="sidebarExternalLink" href="#">622790_150510_05101756067567567567565758DI</a>  <span class="item__meta__separator">|</span>
        27.08 09:16
      </div>
    </li>

    <li id="saleInvoiceLink1">
      <h3 class="item__title">AUTO</h3>
      <div class="meta">

        <a id="saleInvoiceDocumentNumberLink" class="sidebarExternalLink" href="#">201523443434343434072QU</a>  <span class="item__meta__separator">|</span>
        26.08 15:48
      </div>



    </li>

  </ol>
</div>

问题是我想要将红色底线之后的所有文本替换为 ... 或淡出。看起来不错的东西。有人可以建议我怎么做吗？我也提供了 fiddle 。 link

Answer 1

您可以使用 text-overflow 和 css 以及 max-width 来控制它。

http://fiddle.jshell.net/bqhmkfux/2/

你需要在css中添加这个类:

.sidebarExternalLink {
    max-width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    display: inline-block;
}