HTML文本溢出省略号检测

小开

最佳答案

曾几何时，我需要这样做，我遇到的唯一跨浏览器可靠的解决方案是hack job。我不是这种解决方案的最大粉丝，但它肯定会一次又一次地产生正确的结果。

其思想是克隆元素，删除任何边界宽度，并测试克隆的元素是否比原始元素宽。如果是，你知道它将被截断。

例如，使用jQuery:

var $element = $('#element-to-test');
var $c = $element
.clone()
.css({display: 'inline', width: 'auto', visibility: 'hidden'})
.appendTo('body');


if( $c.width() > $element.width() ) {
// text was truncated.
// do what you need to do
}


$c.remove();

我做了一个jsFiddle来演示这个http://jsfiddle.net/cgzW8/2/

你甚至可以为jQuery创建自己的自定义伪选择器:

$.expr[':'].truncated = function(obj) {
var $this = $(obj);
var $c = $this
.clone()
.css({display: 'inline', width: 'auto', visibility: 'hidden'})
.appendTo('body');


var c_width = $c.width();
$c.remove();


if ( c_width > $this.width() )
return true;
else
return false;
};

然后用它来寻找元素

$truncated_elements = $('.my-selector:truncated');

演示:http://jsfiddle.net/cgzW8/293/

希望这能帮到你。

小开

试试这个JS函数，将span元素作为参数传递:

function isEllipsisActive(e) {
return (e.offsetWidth < e.scrollWidth);
}

小开

除了italo的答案，还可以使用jQuery来实现。

function isEllipsisActive($jQueryObject) {
return ($jQueryObject.width() < $jQueryObject[0].scrollWidth);
}

另外，正如Smoky指出的那样，您可能希望使用jQuery outerWidth()而不是width()。

function isEllipsisActive($jQueryObject) {
return ($jQueryObject.outerWidth() < $jQueryObject[0].scrollWidth);
}

小开

此示例显示单元格表上的工具提示，文本被截断。是基于表宽度动态的:

$.expr[':'].truncated = function (obj) {
var element = $(obj);


return (element[0].scrollHeight > (element.innerHeight() + 1)) || (element[0].scrollWidth > (element.innerWidth() + 1));
};


$(document).ready(function () {
$("td").mouseenter(function () {
var cella = $(this);
var isTruncated = cella.filter(":truncated").length > 0;
if (isTruncated)
cella.attr("title", cella.text());
else
cella.attr("title", null);
});
});

演示:https://jsfiddle.net/t4qs3tqs/

它适用于所有版本的jQuery

小开

来自想一下的答案非常好!不过，让我稍微细化一下:

function isEllipsisActive(e) {
var tolerance = 2; // In px. Depends on the font you are using
return e.offsetWidth + tolerance < e.scrollWidth;
}

跨浏览器兼容性

实际上，如果你尝试上面的代码并使用console.log打印出e.offsetWidth和e.scrollWidth的值，你会注意到，在IE上，即使你没有进行文本截断，也会出现1px或2px的值差异。

所以，根据你使用的字体大小，允许一定的容忍度!

小开

< p > elem。offsetWdith VS le. scrollwidth 这对我很有用! https://jsfiddle.net/gustavojuan/210to9p1/ < / p >

$(function() {
$('.endtext').each(function(index, elem) {
debugger;
if(elem.offsetWidth !== elem.scrollWidth){
$(this).css({color: '#FF0000'})
}
});
});

小开

我认为更好的检测方法是使用getClientRects()，似乎每个矩形都有相同的高度，所以我们可以用不同的top值来计算行数。

getClientRects工作方式类似于这

function getRowRects(element) {
var rects = [],
clientRects = element.getClientRects(),
len = clientRects.length,
clientRect, top, rectsLen, rect, i;


for(i=0; i<len; i++) {
has = false;
rectsLen = rects.length;
clientRect = clientRects[i];
top = clientRect.top;
while(rectsLen--) {
rect = rects[rectsLen];
if (rect.top == top) {
has = true;
break;
}
}
if(has) {
rect.right = rect.right > clientRect.right ? rect.right : clientRect.right;
rect.width = rect.right - rect.left;
}
else {
rects.push({
top: clientRect.top,
right: clientRect.right,
bottom: clientRect.bottom,
left: clientRect.left,
width: clientRect.width,
height: clientRect.height
});
}
}
return rects;
}

getRowRects工作方式类似于这

你可以像这一样检测

小开

对于那些使用(或计划使用)来自Christian Varga的公认答案的人，请注意性能问题。

以这种方式克隆/操作DOM会导致DOM回流(参见这里的DOM回流的解释)，这是非常资源密集型的。

在一个页面上使用Christian Varga的100多个元素的解决方案会导致4秒的回流延迟，在此期间JS线程被锁定。考虑到JS是单线程的，这意味着对最终用户来说有很大的UX延迟。

Italo Borssatto的回答应该是被接受的，它在我的分析过程中大约快了10倍。

小开

所有的解决方案都不适合我，做了的工作是比较元素scrollWidth与其父元素(或子元素，取决于哪个元素有触发器)的scrollWidth。

当子对象的scrollWidth高于父对象的scrollWidth时，就意味着.text-ellipsis是活动的。

当el是父元素时

function isEllipsisActive(el) {
let width       = el.offsetWidth;
let widthChild  = el.firstChild.offsetWidth;
return (widthChild >= width);
}

当el是子元素时

function isEllipsisActive(event) {
let width       = el.offsetWidth;
let widthParent = el.parentElement.scrollWidth;
return (width >= widthParent);
}

小开

e.offsetWidth < e.scrollWidth解决方案并不总是有效。

如果你想使用纯JavaScript，我建议使用这个:

(打印稿)

public isEllipsisActive(element: HTMLElement): boolean {
element.style.overflow = 'initial';
const noEllipsisWidth = element.offsetWidth;
element.style.overflow = 'hidden';
const ellipsisWidth = element.offsetWidth;


if (ellipsisWidth < noEllipsisWidth) {
return true;
} else {
return false;
}
}

小开

@ItaloBorssatto的解决方案是完美的。但在看SO -之前，我做了一个决定。这就是:)

const elems = document.querySelectorAll('span');
elems.forEach(elem => {
checkEllipsis(elem);
});


function checkEllipsis(elem){
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const styles = getComputedStyle(elem);
ctx.font = `${styles.fontWeight} ${styles.fontSize} ${styles.fontFamily}`;
const widthTxt = ctx.measureText(elem.innerText).width;
if (widthTxt > parseFloat(styles.width)){
elem.style.color = 'red'
}
}

span.cat {
display: block;
border: 1px solid black;
white-space: nowrap;
width: 100px;
overflow: hidden;
text-overflow: ellipsis;
}

 <span class="cat">Small Cat</span>
<span class="cat">Looooooooooooooong Cat</span>

小开

我的实现)

const items = Array.from(document.querySelectorAll('.item'));
items.forEach(item =>{
item.style.color = checkEllipsis(item) ? 'red': 'black'
})


function checkEllipsis(el){
const styles = getComputedStyle(el);
const widthEl = parseFloat(styles.width);
const ctx = document.createElement('canvas').getContext('2d');
ctx.font = `${styles.fontSize} ${styles.fontFamily}`;
const text = ctx.measureText(el.innerText);
return text.width > widthEl;
}

.item{
width: 60px;
overflow: hidden;
text-overflow: ellipsis;
}

      <div class="item">Short</div>
<div class="item">Loooooooooooong</div>

小开

在https://stackoverflow.com/users/241142/iconoclast提到的演示http://jsfiddle.net/brandonzylstra/hjk9mvcy/中有一些错误。

在他的演示中，添加这些代码将工作:

setTimeout(() => {
console.log(EntryElm[0].offsetWidth)
}, 0)

小开

这些解决方案都不适合我，所以我选择了一种完全不同的方法。我没有使用带有省略号的CSS解决方案，而是从特定的字符串长度中剪切文本。

  if (!this.isFullTextShown && this.text.length > 350) {
return this.text.substring(0, 350) + '...'
}
return this.text

并且显示“more/less”;按钮，如果超过长度。

  <span
v-if="text.length > 350"
@click="isFullTextShown = !isFullTextShown"
>
\{\{ isFullTextShown ? 'show less' : 'show more' }}
</span>

小开

如果你有反应，我是这么做的。

<div
ref={ref => {
if (!ref) return
const isOverflowing = ref.scrollWidth > ref.clientWidth
if (isOverflowing) {
// handle what to do next here
}
}}
/>

小开

添加到@Дмытрык的答案，缺失的边界和填充的演绎是完全有效的!!

const items = Array.from(document.querySelectorAll('.item'));
items.forEach(item =>{
item.style.color = checkEllipsis(item) ? 'red': 'black'
})


function checkEllipsis(el){
const styles = getComputedStyle(el);
const widthEl = parseFloat(styles.width);
const ctx = document.createElement('canvas').getContext('2d');
ctx.font = `${styles.fontSize} ${styles.fontFamily}`;
const text = ctx.measureText(el.innerText);


let extra = 0;
extra += parseFloat(styles.getPropertyValue('border-left-width'));
extra += parseFloat(styles.getPropertyValue('border-right-width'));
extra += parseFloat(styles.getPropertyValue('padding-left'));
extra += parseFloat(styles.getPropertyValue('padding-right'));
return text.width > (widthEl - extra);
}

.item{
width: 60px;
overflow: hidden;
text-overflow: ellipsis;
}

      <div class="item">Short</div>
<div class="item">Loooooooooooong</div>

小开

对于使用e.offsetWidth < e.scrollWidth并且出现了可以显示全文但仍然有省略号的错误的人。

这是因为offsetWidth和scrollWidth总是舍入值。例如:offsetWidth返回161，但实际宽度为161.25。解决方案是使用getBoundingClientRect

const clonedEl = e.cloneNode(true)
clonedElement.style.overflow = "visible"
clonedElement.style.visibility = "hidden"
clonedElement.style.width = "fit-content"


e.parentElement.appendChild(clonedEl)
const fullWidth = clonedElement.getBoundingClientRect().width
const currentWidth = e.getBoundingClientRect().width


return currentWidth < fullWidth

小开

如果你使用line-clamp >= 2行在多行添加省略号，你可以使用这个条件:

if (
descriptionElement &&
descriptionElement.offsetHeight < descriptionElement.scrollHeight
) {
// has text-overflow
}