Odpowiedzi:
Zwykle można to porównać client[Height|Width]
z scroll[Height|Width]
, aby to wykryć ... ale wartości będą takie same, gdy widoczne jest przepełnienie. Tak więc procedura wykrywania musi uwzględniać to:
// 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;
}
Przetestowano w FF3, FF40.0.2, IE6, Chrome 0.2.149.30.
clientWidth
i scrollWidth
różni się o 1px.
Spróbuj porównać element.scrollHeight
/ element.scrollWidth
do 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
Nie sądzę, aby ta odpowiedź była doskonała. Czasami scrollWidth / clientWidth / offsetWidth są takie same, mimo że tekst jest przepełniony.
Działa to dobrze w Chrome, ale nie w IE i Firefox.
W końcu wypróbowałem tę odpowiedź: wykrywanie przepełnienia tekstu w HTML
Jest doskonały i działa dobrze wszędzie. Więc wybieram to, może możesz spróbować, nie zawiedziesz.
Innym sposobem jest porównanie szerokości elementu z szerokością jego rodzica:
function checkOverflow(elem) {
const elemWidth = elem.getBoundingClientRect().width
const parentWidth = elem.parentElement.getBoundingClientRect().width
return elemWidth > parentWidth
}
Jest to rozwiązanie javascript (z Mootools), które zmniejszy rozmiar czcionki, aby dopasować ją do granic 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 elHeader:
width:100%;
font-size:40px;
line-height:36px;
font-family:Arial;
text-align:center;
max-height:36px;
overflow:hidden;
Zwróć uwagę, że opakowanie elHeader ustawia szerokość elHeader.