Xác định xem nội dung của phần tử HTML có tràn không

136

Tôi có thể sử dụng JavaScript để kiểm tra (không phân biệt thanh cuộn) nếu một phần tử HTML đã tràn nội dung của nó không? Ví dụ: một div dài với kích thước nhỏ, cố định, thuộc tính tràn được đặt thành hiển thị và không có thanh cuộn trên phần tử.

javascript html css

— Barett
nguồn

217

Thông thường, bạn có thể so sánh client[Height|Width]với scroll[Height|Width]để phát hiện điều này ... nhưng các giá trị sẽ giống nhau khi hiển thị tràn. Vì vậy, một thói quen phát hiện phải tính đến điều này:

// 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;
}

Đã thử nghiệm trong FF3, FF40.0.2, IE6, Chrome 0.2.149.30.

— Shog9
nguồn

cảm ơn bạn Shog9 ... thói quen phát hiện là, tôi nghĩ, những gì tôi cần, bởi vì tôi chơi với tràn (ẩn / nhìn thấy)

Tôi có một câu hỏi tương tự tại stackoverflow.com/questions/2023787/ , nơi tôi đang cố gắng tìm ra phần nào của phần tử chứa có phần tràn ẩn.

— slolife

2

Tôi tự hỏi liệu điều này sẽ cho một nhấp nháy ngắn khi phong cách được thay đổi ngắn gọn?

— Stijn de Witt

3

+1. Điều này hoạt động trên các trình duyệt hiện đại (bao gồm ít nhất Chrome 40 và các trình duyệt phiên bản hiện tại khác kể từ thời điểm viết bài này).

— L0j1k

1

Không hoạt động trong MS Edge. Đôi khi nội dung không được tràn nhưng clientWidthvà scrollWidthkhác bằng 1px.

— jesper

11

Hãy thử so sánh element.scrollHeight/ element.scrollWidthvới 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

— Chris MacDonald
nguồn

2

Tôi không nghĩ câu trả lời này là hoàn hảo. Đôi khi scrollWidth / clientWidth / offsetWidth giống nhau mặc dù văn bản bị tràn.

Điều này hoạt động tốt trong Chrome, nhưng không phải trong IE và Firefox.

Cuối cùng, tôi đã thử câu trả lời này: Phát hiện dấu chấm lửng tràn văn bản HTML

Nó hoàn hảo và hoạt động tốt ở mọi nơi. Vì vậy, tôi chọn cái này, có lẽ bạn có thể thử, bạn sẽ không thất vọng.

— zjalex
nguồn

Tôi đề nghị loại bỏ hoặc bỏ qua câu trả lời này, vì nó có một số khiếm khuyết. Tôi sử dụng cái này lúc đầu, nhưng nó không thể hoạt động hoàn hảo với một số kiểu css đặc biệt.

— zjalex

1

Một cách khác là so sánh chiều rộng phần tử với chiều rộng của phần tử mẹ:

function checkOverflow(elem) {
    const elemWidth = elem.getBoundingClientRect().width
    const parentWidth = elem.parentElement.getBoundingClientRect().width

    return elemWidth > parentWidth
}

— Nunes
nguồn

0

Với jQuery bạn có thể làm:

if ( $(".inner-element").prop('scrollHeight') > $(".inner-element").height() ) {

    console.log("element is overflowing");

} else {

    console.log("element is not overflowing");

}

Thay đổi .prop('scrollWidth')và .width()nếu cần.

— Ác mộng
nguồn

-2

Đây là một giải pháp javascript (với Mootools) sẽ giảm kích thước phông chữ để phù hợp với giới hạn của elHeader.

while (elHeader.clientWidth < elHeader.scrollWidth || elHeader.clientHeight < elHeader.scrollHeight) {
  var f = parseInt(elHeader.getStyle('font-size'), 10);
  f--;
  elHeader.setStyle('font-size', f + 'px');
}

CSS của elHeader:

    width:100%;
    font-size:40px;
    line-height:36px;
    font-family:Arial;
    text-align:center;
    max-height:36px;
    overflow:hidden;

Lưu ý trình bao bọc của elHeader đặt chiều rộng của elHeader.

— người dùng945389
nguồn