我提出了一种在 webkit 浏览器中通过滚动来模拟文本溢出的方法。
它需要 JavaScript。为了方便起见，我的解释使用了 jQuery，但我还包含了一个普通的 JavaScript 解决方案。
The p元素需要位于容器内，如下所示：
<div class="ellipsis">
<p>
Test paragraph with <code>ellipsis</code>...
</p>
</div>
使用这些样式，替换300px对于您喜欢的宽度：
.ellipsis {
width: 300px;
overflow-x: scroll;
}
.ellipsis p {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
这会导致滚动条出现在容器上而不是p元素。
首先，我们确定宽度p并像这样存储它：
$('.ellipsis p').each(function() {
$(this)
.data('width', $(this).css('display','inline-block').width()+10)
.css('display','');
});
Without display:inline-block, the p与其容器具有相同的宽度 - 在本例中为 300px。inline-block allows p扩展到全宽。我们将此宽度加 10 以考虑滚动条上的右箭头。然后我们恢复p的默认值display.
We want p to always具有该宽度，以便滚动条将移动整个范围p。然而，设置p到那个宽度就可以去掉省略号。
解决方案？放p's width为其容器的宽度，并设置p's paddingRight之间的差异p的全宽度及其容器的宽度。
如果容器不滚动，这很有效。要考虑滚动位置，只需包含scrollLeft在计算中：
$('.ellipsis').scroll(function() {
$(this).find('p').css({
paddingRight: $(this).find('p').data('width') - $(this).scrollLeft() - $(this).width(),
width: $(this).scrollLeft() + $(this).width()
});
});
jQuery 解决方案：
$('.ellipsis p').each(function() {
$(this)
.data('width', $(this).css('display','inline-block').width()+10)
.css('display','');
});
$('.ellipsis').scroll(function() {
$(this).find('p').css({
paddingRight: $(this).find('p').data('width') - $(this).scrollLeft() - $(this).width(),
width: $(this).scrollLeft() + $(this).width()
});
});
$('.ellipsis').scroll();
#E1 {
width: 200px;
}
#E2 {
width: 400px;
}
.ellipsis {
overflow-x: scroll;
border: 1px solid #ddd;
margin: 2em 0em;
}
.ellipsis p {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
margin: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ellipsis" id="E1">
<p>
Test paragraph with <code>ellipsis</code>. It needs quite a lot of text in order to properly test <code>text-overflow</code>.
</p>
</div>
<div class="ellipsis" id="E2">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
普通 JavaScript 解决方案：
document.querySelectorAll('.ellipsis p').forEach(function(self) {
self.style.display = 'inline-block';
self.dataset.width = self.clientWidth + 10;
self.style.display = '';
});
document.querySelectorAll('.ellipsis').forEach(function(self) {
self.addEventListener('scroll', function() {
const p = self.querySelector('p');
const cw = this.clientWidth;
const sl = this.scrollLeft;
p.style.paddingRight = (p.dataset.width - sl - cw) + 'px';
p.style.width = sl + cw + 'px';
});
});
document.querySelectorAll('.ellipsis').forEach(function(self) {
self.dispatchEvent(new Event('scroll', {bubbles: true}));
});
#E1 {
width: 200px;
}
#E2 {
width: 400px;
}
.ellipsis {
overflow-x: scroll;
border: 1px solid #ddd;
margin: 2em 0em;
}
.ellipsis p {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
margin: 0;
}
<div class="ellipsis" id="E1">
<p>
Test paragraph with <code>ellipsis</code>. It needs quite a lot of text in order to properly test <code>text-overflow</code>.
</p>
</div>
<div class="ellipsis" id="E2">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
