console
const str = "adsahdljhasdljasdjasdjaskdjassadasdasdasdasdassdasdasdasdasldasd";
const container = document.getElementById("container")
container.innerHTML = str;
const maxWidth = 200;
const maxRow = 2;
const calcuteWidth = (text, fontSize = "14px") => {
let span = document.getElementById("__getwidth");
if (!span) {
span = document.createElement("span");
};
span.id = "__getwidth";
span.style.visibility = "hidden";
span.style.fontSize = fontSize;
span.style.whiteSpace = "nowrap";
span.innerText = text;
document.body.appendChild(span);
const width = span.offsetWidth;
document.body.removeChild(span);
return width;
};
const width = calcuteWidth(str);
const res = []
if (width > maxWidth) {
let i = 0;
let strArr = str.split("");
let tmp = "";
const len = str.length
while (i < len) {
i++;
let first = strArr.shift();
if (calcuteWidth(tmp + first) > 200) {
res.push(tmp);
tmp = "";
};
if (i === len) res.push(tmp + first);
tmp += first;
}
};
console.log(res);
res.map((i, index) => {
if (index < maxRow) {
let div = document.createElement("div");
div.innerText = i;
if (index === maxRow - 1) {
div.className += "textoverflow"
}
container.appendChild(div);
}
})
<div id="container"></div>
.textoverflow{
width: 190px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}