Determina se il contenuto di un elemento HTML trabocca

136

Posso usare JavaScript per verificare (indipendentemente dalle barre di scorrimento) se un elemento HTML ha traboccato il suo contenuto? Ad esempio, un div lungo con dimensioni fisse piccole, la proprietà di overflow impostata su visibile e nessuna barra di scorrimento sull'elemento.

javascript html css

— Barett
fonte

217

Normalmente, puoi confrontarlo client[Height|Width]con scroll[Height|Width]per rilevarlo ... ma i valori saranno gli stessi quando sarà visibile l'overflow. Pertanto, una routine di rilevamento deve tenere conto di ciò:

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

Testato in FF3, FF40.0.2, IE6, Chrome 0.2.149.30.

— Shog9
fonte

grazie Shog9 ... penso che la routine di rilevamento sia ciò di cui avevo bisogno, perché gioco con overflow (nascosto / visibile)

Ho una domanda simile su stackoverflow.com/questions/2023787/… dove sto cercando di capire quali parti dell'elemento contenitore hanno un overflow nascosto.

— slolife

2

Mi chiedo se questo darà un breve sfarfallio poiché lo stile viene brevemente modificato?

— Stijn de Witt,

3

+1. Funziona su browser moderni (inclusi almeno Chrome 40 e altri browser della versione corrente dal momento in cui scrivo).

— L0j1k,

1

Non funziona in MS Edge. A volte il contenuto non è straripante, ma clientWidthe scrollWidthdifferisce da 1px.

— jesper

11

Prova a confrontare element.scrollHeight/ element.scrollWidthcon 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
fonte

2

Non penso che questa risposta sia perfetta. A volte scrollWidth / clientWidth / offsetWidth sono uguali anche se il testo è overflow.

Funziona bene con Chrome, ma non con IE e Firefox.

Alla fine, ho provato questa risposta: rilevamento di puntini di sospensione con overflow del testo HTML

È perfetto e funziona bene ovunque. Quindi scelgo questo, forse puoi provare, non deluderai.

— zjalex
fonte

Suggerisco di rimuovere o annullare la votazione di questa risposta, poiché presenta qualche difetto. Lo uso all'inizio, ma non può funzionare perfettamente con uno speciale stile CSS.

— zjalex,

1

Un altro modo è confrontare la larghezza dell'elemento con la larghezza del suo genitore:

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

    return elemWidth > parentWidth
}

— Alisson Nunes
fonte

0

Con jQuery puoi fare:

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

    console.log("element is overflowing");

} else {

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

}

Passare a .prop('scrollWidth')e .width()se necessario.

— Agu Dondo
fonte

-2

Questa è una soluzione javascript (con Mootools) che ridurrà la dimensione del carattere per adattarsi ai limiti di 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');
}

Il CSS di elHeader:

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

Nota che il wrapper di elHeader imposta la larghezza di elHeader.

— user945389
fonte