You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
26 lines
928 B
26 lines
928 B
// found this hoe on stack overflow
|
|
|
|
module.exports = function isOverflowing(el) {
|
|
return getTextWidth(el.innerHTML, getCanvasFontSize(el)) > el.clientWidth - 30;
|
|
};
|
|
|
|
function getTextWidth(text, font) {
|
|
// re-use canvas object for better performance
|
|
const canvas = getTextWidth.canvas || (getTextWidth.canvas = document.createElement("canvas"));
|
|
const context = canvas.getContext("2d");
|
|
context.font = font;
|
|
const metrics = context.measureText(text);
|
|
return metrics.width;
|
|
}
|
|
|
|
function getCssStyle(element, prop) {
|
|
return window.getComputedStyle(element, null).getPropertyValue(prop);
|
|
}
|
|
|
|
function getCanvasFontSize(el = document.body) {
|
|
const fontWeight = getCssStyle(el, 'font-weight') || 'normal';
|
|
const fontSize = getCssStyle(el, 'font-size') || '16px';
|
|
const fontFamily = getCssStyle(el, 'font-family') || 'Times New Roman';
|
|
|
|
return `${fontWeight} ${fontSize} ${fontFamily}`;
|
|
} |