Currently, I am working on a project that involves implementing a gallery feature. The challenge lies in displaying file names which can be quite lengthy, and we are restricted to showing only 2 lines of text. While this can be achieved using line clamp and overflow, the additional requirement to always display the file extension at the end poses an issue.
Instead of displaying:
longfilename_long
filename_longfi..
The desired output should look like:
longfilename_long
filename_....jpg
I attempted a simpler approach by truncating the file name to a certain number of characters and appending the file extension at the end with the following function:
const handleName = (file: File) => {
let fileName = '';
const fileExtension = file.name.split('.').pop();
file.name.length > LIMIT_CHAR
? (fileName = `${file.name.substring(0, MAX_CHARACTERS_ALLOWED - fileExtension.length - 1)}....${fileExtension}`)
: (fileName = file.name);
return fileName;
};
<div class="filename-wrap">
<p>{{ handleName(item) }}</p>
</div>
.custom-delete-label-isShow {
margin: auto;
height: 105px;
.filename-wrap {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
p {
color: #fff;
margin: auto;
font-size: 14px;
padding: 5px 8px;
overflow-wrap: break-word;
}
}
}
However, this method sometimes results in long, breakable substrings within the file names surpassing the length limit and getting cutoff prematurely.
https://i.sstatic.net/KNgCv.png
I'm uncertain about the best approach to tackle this problem, so any assistance would be highly appreciated.