江西企业 网站建设,四川建设网app下载,抖音代运营投诉平台,wordpress i18n实现效果 实现思路
获取标题盒子的真实宽度, 我这里用的是clientWidth#xff1b;获取文本内容所占的实际宽度#xff1b;根据文字的大小计算出每个文字所占的宽度#xff1b;判断文本内容的实际宽度是否超出了标题盒子的宽度#xff1b;通过文字所占的宽度累加之和与标题…实现效果 实现思路
获取标题盒子的真实宽度, 我这里用的是clientWidth获取文本内容所占的实际宽度根据文字的大小计算出每个文字所占的宽度判断文本内容的实际宽度是否超出了标题盒子的宽度通过文字所占的宽度累加之和与标题盒子的宽度做对比计算出要截取位置的索引同理文本尾部的内容需要翻转一下然后计算索引截取完之后再翻转回来
代码
div classtitle idtest开头这里是中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容结尾。/divcss代码: 设置文本不换行同时设置overflow:hidden让文本溢出盒子隐藏
.title {width: 640px;height: 40px;line-height: 40px;font-size: 14px;color: #00b388;border: 1px solid #ddd;overflow: hidden;/* text-overflow: ellipsis; */white-space: nowrap;/* box-sizing: border-box; */padding: 0 10px;
}javascript代码获取标题盒子的宽度时要注意,如果在css样式代码中设置了padding, 就需要获取标题盒子的左右padding值。 通过getComputedStyle属性获取到所有的css样式属性对应的值, 由于获取的padding值都是带具体像素单位的比如: px可以用parseInt特殊处理一下。
判断文本内容是否超出标题盒子 // 标题盒子dom
const dom document.getElementById(test);// 获取dom元素的padding值
function getPadding(el) {const domCss window.getComputedStyle(el, null);const pl Number.parseInt(domCss.paddingLeft, 10) || 0;const pr Number.parseInt(domCss.paddingRight, 10) || 0;console.log(padding-left:, pl, padding-right:, pr);return {left: pl,right: pr}
}
// 检测dom元素的宽度
function checkLength(dom) {// 创建一个 Range 对象const range document.createRange();// 设置选中文本的起始和结束位置range.setStart(dom, 0),range.setEnd(dom, dom.childNodes.length);// 获取元素在文档中的位置和大小信息,这里直接获取的元素的宽度let rangeWidth range.getBoundingClientRect().width;// 获取的宽度一般都会有多位小数点判断如果小于0.001的就直接舍掉const offsetWidth rangeWidth - Math.floor(rangeWidth);if (offsetWidth 0.001) {rangeWidth Math.floor(rangeWidth);}// 获取元素padding值const { left, right } getPadding(dom);const paddingWidth left right;// status文本内容是否超出标题盒子// width: 标题盒子真实能够容纳文本内容的宽度return {status: paddingWidth rangeWidth dom.clientWidth,width: dom.clientWidth - paddingWidth};
}通过charCodeAt返回指定位置的字符的Unicode编码, 返回的值对应ASCII码表对应的值0-127包含了常用的英文、数字、符号等这些都是占一个字节长度的字符而大于127的为占两个字节长度的字符。
截取和计算文本长度
// 计算文本长度当长度之和大于等于dom元素的宽度后返回当前文字所在的索引截取时会用到。
function calcTextLength(text, width) {let realLength 0;let index 0;for (let i 0; i text.length; i) {charCode text.charCodeAt(i);if (charCode 0 charCode 128) {realLength 1;} else {realLength 2 * 14; // 14是字体大小}// 判断长度为true时终止循环记录索引并返回if (realLength width) {index i;break;}}return index;
}// 设置文本内容
function setTextContent(text) {const { status, width } checkLength(dom);let str ;if (status) {// 翻转文本let reverseStr text.split().reverse().join();// 计算左右两边文本要截取的字符索引const leftTextIndex calcTextLength(text, width);const rightTextIndex calcTextLength(reverseStr, width);// 将右侧字符先截取后翻转reverseStr reverseStr.substring(0, rightTextIndex);reverseStr reverseStr.split().reverse().join();// 字符拼接str ${text.substring(0, leftTextIndex)}...${reverseStr};} else {str text;}dom.innerHTML str;
}相关知识
js判断文字被溢出隐藏的几种方法
通过document.createRange和document.getBoundingClientRect()这两个方法实现的。也就是上面代码中实现的checkLength方法。创建一个隐藏的div模拟实际宽度
通过创建一个不会在页面显示出来的dom元素然后把文本内容设置进去真实的文本长度与标题盒子比较宽度判断是否被溢出隐藏了。
function getDomDivWidth(dom) {const elementWidth dom.clientWidth;const tempElement document.createElement(div);const style window.getComputedStyle(dom, null)const { left, right } getPadding(dom); // 这里我写的有点重复了可以优化tempElement.style.cssText position: absolute;top: -9999px;left: -9999px;white-space: nowrap;padding-left:${style.paddingLeft};padding-right:${style.paddingRight};font-size: ${style.fontSize};font-family: ${style.fontFamily};font-weight: ${style.fontWeight};letter-spacing: ${style.letterSpacing};;tempElement.textContent dom.textContent;document.body.appendChild(tempElement);const obj {status: tempElement.clientWidth right left elementWidth,width: elementWidth - left - right}document.body.removeChild(tempElement);return obj;
}创建一个block元素来包裹inline元素
外层套一个块级(block)元素内部是一个行内(inline)元素。给外层元素设置溢出隐藏的样式属性不对内层元素做处理这样内层元素的宽度是不变的。因此通过获取内层元素的宽度和外层元素的宽度作比较就可以判断出文本是否被溢出隐藏了。
// html代码
div classtitle idtestspan classcontent近日银行纷纷下调大额存单利率但银行定期存款仍被疯抢。银行理财经理表示有意向购买定期存款要尽快不确定利率是否会再降。/span
/div// 创建一个block元素来包裹inline元素
const content document.querySelector(.content);
function getBlockDomWidth(dom) {const { left, right } getPadding(dom);console.log(dom.clientWidth, content.clientWidth)const obj { status: dom.clientWidth content.clientWidth left right,width: dom.clientWidth - left - right}return obj;
}使用canvas中的measureText方法和TextMetrics对象来获取元素的高度
通过Canvas 2D渲染上下文(context)可以调用measureText方法此方法会返回TextMetrics对象该对象的width属性值就是字符占据的宽度由此也能获取到文本的真实宽度此方法有弊端比如说兼容性精确度等等。
// 获取文本长度
function getTextWidth(text, font 14) {const canvas document.createElement(canvas);const context canvas.getContext(2d)context.font fontconst metrics context.measureText(text);return metrics.width
}JS获取字符串长度的几种常用方法
通过charCodeAt判断字符编码
通过charCodeAt获取指定位置字符的Unicode编码返回的值对应ASCII码表对应的值0-127包含了常用的英文、数字、符号等这些都是占一个字节长度的字符而大于127的为占两个字节长度的字符。
function calcTextLength(text) {let realLength 0;for (let i 0; i text.length; i) {charCode text.charCodeAt(i);if (charCode 0 charCode 128) {realLength 1;} else {realLength 2;}}return realLength;
}采取将双字节字符替换成aa的做法取长度
function getTextWidth(text) {return text.replace(/[^\x00-\xff]/g,aa).length;
};
