In my custom file manager, I am looking to display truncated filenames in a unique way. It is crucial to show the beginning and ending of the filename, so simply using overflow:ellipsis is not sufficient.
The tiles displaying the filenames can adjust their width within bootstrap columns. Since they are rendered with handlebars, I have the ability to manipulate the string before it is rendered using a helper function. I prefer not to rely on additional JavaScript, such as event listeners for resizing.
My concept involves splitting the filename string with regex while the tile is being rendered. For example,
"long_filename_with_number_at_the_end_001.jpg"["long_filename_with_number_at_the_end_", "001.jpg"]Next, I aim to include these string segments in two spans inside a parent div, where the right span expands to fit its content while the left span fills the remaining space. The left span should have the text-overflow:ellipsis property.
While exploring solutions, I came across this helpful answer that aligned with my goals. I made a few modifications, but did not achieve the desired outcome.
* {
position: relaitve;
}
.outer {
width: 110px;
height: 22px;
border: 1px solid #ccc;
}
#colA {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
background:yellow;
}
#colB {
float:right;
background: pink;
}<div class="outer">
<div id="colA">long_filename_foo_bar</div>
<div id="colB">001.jpg</div>
</div>