[英]How to truncate strings by placing an ellipsis in the middle of a string when the table is resized
我正在尝试在网络上制作文件浏览器的原型,它有一个显示文件列表的表格。 我想让表格变得灵活,根据屏幕宽度调整列宽并截断文件名以仅在单元格中显示 1 行文本。 我希望它截断中间的字符串,而不是尾部的字符串,以显示文件扩展名。
我能够通过一些研究来编写代码。 但问题是,代码看起来太重了,所以当我测试它时,它会使 web 视图变慢,有时会崩溃。 有没有更简单的方法可以得出相同的结果?
HTML
<table id = "listTable">
<tr class = "listTable_firstRow">
<th style = "width: 54px;"><img src="assets/unchecked.png" style = "width: 16px; display: table-cell; margin: auto;" id = "tableSelAll"></th>
<th style = "width: 54px;">Type</th>
<th style = "text-align: left;padding-left: 18px; min-width: 0px;">Name</th>
<th style = "width: 12%; min-width: 72px;">Owner</th>
<th style = "width: 12%; min-width: 72px;">Last modified</th>
<th style = "width: 12%; min-width: 72px;">Updated</th>
<th style = "width: 12%; min-width: 72px;">File size</th>
</tr>
</table>
爪哇脚本
function getvisualLength(target){
var ruler = document.getElementById("ruler");
ruler.innerHTML = target;
return ruler.offsetWidth;
}
function getTrimmedString(targetString, targetWidth){
var tmp = targetString;
var tail = targetString.substr(targetString.indexOf('.')-3);
var truncLength = getvisualLength("...");
var tailLength = getvisualLength(truncLength);
if (getvisualLength(tmp) > targetWidth){
while (getvisualLength(tmp) > (targetWidth-(truncLength+tailLength+10))){
tmp = tmp.substr(0, tmp.length-1);
}
}
else{
return tmp;
}
return tmp+"..."+tail;
}
window.addEventListener("resize", function(){
var table = document.getElementById("listTable");
for (var i = 4; i < table.rows.length; i++){
var getCellWidth = document.getElementById("listTable").rows[0].cells[2].offsetWidth;
var str = files[i][0];
var tmp = getTrimmedString(str, getCellWidth);
document.getElementById("listTable").rows[i].cells[2].innerHTML = tmp;
}
});
function addListToTable(target, list){
var table = document.getElementById(target);
for (var i=0; i<list.length; i++){
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var getIconSource;
row.style.cssText = "height:41px; border-bottom: 1px solid #f4f4f4";
for (var k=0; k<thmbIconList.length; k++){
if (thmbIconList[k][0] == list[i][2]){
getIconSource = thmbIconList[k][1];
}
}
row.clickStat = "off";
row.id = "tableRow";
var checkbox = row.insertCell(0);
var type = row.insertCell(1);
var name = row.insertCell(2);
var owner = row.insertCell(3);
var lastmodified = row.insertCell(4);
var update = row.insertCell(5);
var size = row.insertCell(6);
checkbox.innerHTML = "<img src=\"assets/unchecked.png\" style = \"width: 16px; display: table-cell; margin: auto;\">"
type.innerHTML = "<img src=\""+getIconSource+"\"style = \"width: 20px; display: table-cell; margin: auto;\">"
name.innerHTML = list[i][0];
name.style.cssText = "display: block;"
name.style.cssText = "text-align: left; padding-left: 18px";
owner.innerHTML = "me";
owner.style.cssText = "min-width: 72px; text-align: center"
lastmodified.innerHTML = list[i][1];
lastmodified.style.cssText = "min-width: 72px; text-overflow:ellipsis; overflow: hidden; white-space: nowrap; text-align: center";
update.innerHTML = list[i][1];
update.style.cssText = "min-width: 72px; text-align: center";
size.innerHTML = list[i][3];
size.style.cssText = "min-width: 72px;text-align: center";
}
}
addListToTable("listTable", folders);
addListToTable("listTable", files);
var folders = [["Documents", "Oct 24 2019", "folder","-"], ["MyFolder_1", "Jan 2 2019", "folder","-"], ["MyFolder_2", "Oct 1 2019", "folder","-"]]
var files = [["description20191025.docx","Oct 25 2019","word", "20MB"], ["description20191025.pptx","Oct 25 2019","ppt", "20MB"], ["description20191025.xlsx","Oct 25 2019","excel", "20MB"], ["nppt_slideBackup.nppt","Oct 25 2019","nppt", "20MB"],["7D65EC6E-4A3882CF.png", "Oct 21 2019", "img", "128MB"], ["photo-153855424537648538.png", "Oct 17 2019", "img", "1.2MB"], ["photo-1538537642458538.png", "Oct 17 2019", "img", "20MB"], ["photo-15385376424548538.png", "Oct 17 2019", "img", "128MB"], ["photo-15385376425248538.png", "Oct 17 2019", "img", "1.2MB"]]
CSS
#ruler { visibility: hidden; white-space: nowrap; }
#listTable{
width: calc(100% - 20px);
border-collapse: collapse;
}
.listTable_firstRow{
height: 41px;
border-bottom: 1px solid #d8d8d8;
}
您可以使用 JavaScript 的str.replace();
来实现正则表达式str.replace();
功能。
一个例子可以在这里找到: Replaceing filename with a Regex in JavaScript
您可以拆分每个字符串以删除前三个字符,然后修改示例中的代码以替换文件名中除扩展名之外的所有字符。
像这样:
function truncateFilename(str) {
// Find first 3 characters of filename
var start = str.substring(0,3);
/* Replace everything before the final '.' with an ellipsis.
* The final '.' is retained and therefore only two additional '.' are needed.
*/
var end = str.replace(/^.*(?=\.[^.]+$)/g, "..");
/* Append resulting extention to the first 3 characters of
* the file name that we found earlier.
*/
return start + end;
}
var filename = "my_very_long_file_name.exe";
console.log(truncateFilename(filename));
我做了一个小提琴,所以你可以测试它。
关于你的尺子问题,我建议你为你遇到的每个问题发布一个单独的问题,你更有可能找到解决方案。 您的问题在这里已经有了答案。 offsetWidth
包括内边距、边框等,而clientWidth
测量元素的实际宽度。 你应该试试:
function getvisualLength(target){
var ruler = document.getElementById("ruler");
ruler.innerHTML = target;
return ruler.clientWidth;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.