html 文本溢出,在HTML中隐藏溢出文本的中间

我提出了一个纯JavaScript解决方案,将

Nick R’s和

alhoseany’s答案结合在一起,同时添加了一些额外的功能来检测长度,并指定省略号两边所需的字符数.

使用这种方法,您不需要知道容纳在容器中的字符数,它们都是自动完成的,并且也可以在窗口调整大小时触发.

调整结果框架大小以查看结果.

结果

这个：

…成为这样

…或这个：

…或这个！

CSS

p {

border: 1px dashed #000;

position: relative;

display: block;

width: 50%;

}

p:before {

content:attr(data-shortened);

color: #000;

display: block;

position: absolute;

top: 0;

left: 0;

width: 100%;

}

JavaScript的

function shortenContent(content,chars) {

/* chars here determines how many characters

* we want on either side of the elipsis. */

var chars = chars || 3; // Default is 3

if (!content && !content.length)

return;

/* Loop through each content element and

* shorten where necessary. */

for (i = 0; i < content.length; i++) {

var el = content[i],elementWidth = el.offsetWidth,textWidth = el.scrollWidth;

/* If our element's width is less than

* its content's width,we need to shorten. */

if (elementWidth < textWidth) {

var text = el.innerText;

/* Set the data attribute for the CSS to use. */

el.setAttribute(

'data-shortened',text.slice(0,chars) +'...'+ text.slice(-chars)

);

el.style.color = 'rgba(0,0)';

}

/* Otherwise,ensure non-shortened text is visible. */

else {

el.setAttribute('data-shortened','');

el.style.color = null;

}

}

}

如何使用？

要使用上述函数,只需要将一个元素集合传入shortenContent函数：

// Get the content we wish to shorten

var content = document.querySelectorAll('div p');

/* Trigger the function initially. */

shortenContent(content);

abcdefghijklmnopqrstuvwxyz => abc...xyz

指定不同数量的字符

如果要在省略号之前和之后出现不同数量的字符(例如,abcd … wxyz而不是abc … xyz),则可以将一个数字作为第二个参数传入shortenContent函数：

/* Trigger the function initially. */

shortenContent(content,4);

abcdefghijklmnopqrstuvwxyz => abcd...wxyz

窗口调整大小示例

当窗口(在这种情况下,JSFiddle结果窗格)改变大小时,这将触发shortenContent函数.

/* Fire the shorten function when the window resizes. */

window.onresize = function(event) {

shortenContent(content);

};