文本省略号在第一跨度

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的。

下面

观看演示：

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

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