文字我要讓這樣的:文本省略號在第一跨度
- 兩個
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的方式。
它已經工作我想?如果我可以做什麼不工作? – kukkuz
@kukkuz是的,它的工作。但是,如果刪除了'span.date'的寬度,那麼它不起作用。因爲'span.date'的文本可以更改爲更長。 –