文本省略号到第一个跨度中的文本

Question

我想这样做：

• 一行中有两个span（span.title，span.date）。
• span.date是span.title的下一个（不对齐父母的右侧）
• span.title应该是文字溢出：省略号（不是span.date）

var title = document.querySelector('.title');
var text = title.innerText;
document.querySelector('button').onclick = function() {
  if (title.innerText.length > 30) {
    title.innerText = text;
  }
  else {
    title.innerText = text.repeat(30);
  }
}

/* Polyfill */
if (!String.prototype.repeat) {
  String.prototype.repeat = function(count) {
    'use strict';
    if (this == null) {
      throw new TypeError('can\'t convert ' + this + ' to object');
    }
    var str = '' + this;
    count = +count;
    if (count != count) {
      count = 0;
    }
    if (count < 0) {
      throw new RangeError('repeat count must be non-negative');
    }
    if (count == Infinity) {
      throw new RangeError('repeat count must be less than infinity');
    }
    count = Math.floor(count);
    if (str.length == 0 || count == 0) {
      return '';
    }
    // Ensuring count is a 31-bit integer allows us to heavily optimize the
    // main part. But anyway, most current (August 2014) browsers can't handle
    // strings 1 << 28 chars or longer, so:
    if (str.length * count >= 1 << 28) {
      throw new RangeError('repeat count must not overflow maximum string size');
    }
    var rpt = '';
    for (var i = 0; i < count; i++) {
      rpt += str;
    }
    return rpt;
  }
}

div.line {
  position: relative;
  display: inline-block;
  height: 20px;
  line-height: 20px;
  white-space: nowrap;
  padding-right: 110px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  box-sizing: border-box;
}

.title {
  font-size: 14px;
}

.date {
  position: absolute;
  right: 0;
  top: 0;
  height: 20px;
  width: 100px;
  font-size: 12px;
}

<div class="line">
  <span class="title">Long Title</span>
  <span class="date">2017-08-27</span>
</div>
<div>
<button>toggle title</button>
</div>

这样，第二个跨度必须有固定的宽度 但在我的情况下，两个跨度都不能有固定的宽度。

我怎么能做到这一点？

• 我已经知道使用Javascript的方法了。但我想知道没有Javascript的方式。

Answer 1

如果flexbox是一个选项，您可以这样做：

1. 将inline-block替换为flex line。

2. 从padding-right移除text-overflow: ellipsis，overflow:hidden和line。

3. 将省略号添加到title：

   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   

4. 删除date的绝对位置。

见下面的演示：

＆＃13;
＆＃13;
var title = document.querySelector('.title');
var text = title.innerText;
document.querySelector('button').onclick = function() {
  if (title.innerText.length > 30) {
    title.innerText = text;
  }
  else {
    title.innerText = text.repeat(30);
  }
}

/* Polyfill */
if (!String.prototype.repeat) {
  String.prototype.repeat = function(count) {
    'use strict';
    if (this == null) {
      throw new TypeError('can\'t convert ' + this + ' to object');
    }
    var str = '' + this;
    count = +count;
    if (count != count) {
      count = 0;
    }
    if (count < 0) {
      throw new RangeError('repeat count must be non-negative');
    }
    if (count == Infinity) {
      throw new RangeError('repeat count must be less than infinity');
    }
    count = Math.floor(count);
    if (str.length == 0 || count == 0) {
      return '';
    }
    // Ensuring count is a 31-bit integer allows us to heavily optimize the
    // main part. But anyway, most current (August 2014) browsers can't handle
    // strings 1 << 28 chars or longer, so:
    if (str.length * count >= 1 << 28) {
      throw new RangeError('repeat count must not overflow maximum string size');
    }
    var rpt = '';
    for (var i = 0; i < count; i++) {
      rpt += str;
    }
    return rpt;
  }
}
＆＃13;
div.line {
  position: relative;
  display: flex; /* ADDED THIS */
  height: 20px;
  line-height: 20px;
  white-space: nowrap;
  /*padding-right: 110px;*/
  max-width: 100%;
  /*overflow: hidden;
  text-overflow: ellipsis;*/
  box-sizing: border-box;
}

.title {
  font-size: 14px;
  /* ADDED THESE */
  padding-right: 10px; 
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.date {
  /*position: absolute;
  right: 0;
  top: 0;*/
  height: 20px;
  width: 100px;
  font-size: 12px;
}
＆＃13;
<div class="line">
  <span class="title">Long Title</span>
  <span class="date">2017-08-27</span>
</div>
<div>
<button>toggle title</button>
</div>
＆＃13;
＆＃13;
＆＃13;