我能否使用 JavaScript 来检查(不考虑滚动条)HTML 元素是否溢出其内容?例如,一个长的 div 具有固定的小尺寸,overflow 属性设置为 visible,并且元素上没有滚动条。
我能否使用 JavaScript 来检查(不考虑滚动条)HTML 元素是否溢出其内容?例如,一个长的 div 具有固定的小尺寸,overflow 属性设置为 visible,并且元素上没有滚动条。
client[Height|Width]
和scroll[Height|Width]
以便检测到此问题...但是当overflow为visible时,这些值将相同。因此,检测程序必须考虑到这一点:// Determines if the passed element is overflowing its bounds,
// either vertically or horizontally.
// Will temporarily modify the "overflow" style to detect this
// if necessary.
function checkOverflow(el)
{
var curOverflow = el.style.overflow;
if ( !curOverflow || curOverflow === "visible" )
el.style.overflow = "hidden";
var isOverflowing = el.clientWidth < el.scrollWidth
|| el.clientHeight < el.scrollHeight;
el.style.overflow = curOverflow;
return isOverflowing;
}
在FF3、FF40.0.2、IE6、Chrome 0.2.149.30中进行过测试。
clientWidth
和 scrollWidth
之间会相差 1 像素。 - jesper尝试比较element.scrollHeight
/element.scrollWidth
和element.offsetHeight
/element.offsetWidth
http://developer.mozilla.org/en/DOM/element.offsetWidth
http://developer.mozilla.org/en/DOM/element.offsetHeight
http://developer.mozilla.org/en/DOM/element.scrollWidth
http://developer.mozilla.org/en/DOM/element.scrollHeight
另一种方法是将元素的宽度与其父元素的宽度进行比较:
function checkOverflow(elem) {
const elemWidth = elem.getBoundingClientRect().width
const parentWidth = elem.parentElement.getBoundingClientRect().width
return elemWidth > parentWidth
}
object-fit: cover;
。 - Alynvadiv
或span
。 - CWSiteswidth
或max-width
被设置为100%
或-webkit-fill-available
。 - Alynva我不喜欢这些中的任何一个,所以我写了这个。非常好用!
function isOverflowY(element) {
return element.scrollHeight != Math.max(element.offsetHeight, element.clientHeight)
}
if ( $(".inner-element").prop('scrollHeight') > $(".inner-element").height() ) {
console.log("element is overflowing");
} else {
console.log("element is not overflowing");
}
如果需要,可将其更改为 .prop('scrollWidth')
和 .width()
。
while (elHeader.clientWidth < elHeader.scrollWidth || elHeader.clientHeight < elHeader.scrollHeight) {
var f = parseInt(elHeader.getStyle('font-size'), 10);
f--;
elHeader.setStyle('font-size', f + 'px');
}
elHeader的CSS:
width:100%;
font-size:40px;
line-height:36px;
font-family:Arial;
text-align:center;
max-height:36px;
overflow:hidden;