Ответы:
Обычно вы можете сравнить client[Height|Width]
с scroll[Height|Width]
, чтобы обнаружить это ... но значения будут одинаковыми, когда переполнение будет видно. Итак, процедура обнаружения должна учитывать это:
// 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
отличается от 1px.
Попробуйте сравнить 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
Я не думаю, что этот ответ идеален. Иногда scrollWidth / clientWidth / offsetWidth совпадают, даже если текст переполнен.
Это хорошо работает в Chrome, но не в IE и Firefox.
Наконец, я попробовал этот ответ: Обнаружение многоточия переполнения текста HTML
Это прекрасно и хорошо работает где угодно. Поэтому я выбираю это, может быть, вы можете попробовать, вы не разочаруетесь.
Другой способ - сравнить ширину элемента с шириной его родителя:
function checkOverflow(elem) {
const elemWidth = elem.getBoundingClientRect().width
const parentWidth = elem.parentElement.getBoundingClientRect().width
return elemWidth > parentWidth
}
Это решение javascript (с Mootools), которое уменьшит размер шрифта до размеров 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;
Обратите внимание, что обертка elHeader устанавливает ширину elHeader.