in my custom file manager I want to show truncated filenames. It's important to see the beginning and the ending, so just overflow:ellipsisdoesn't do the work.
The tiles where the filename is shown can change their width (inside bootstrap columns). They are rendered with handlebars, so I can manipulate the String before it's rendered (witch a helper). After that, I don't want to use javascript anymore (e.g. eventlisteners which listen to resize)
My Idea: Splitting the string of the filename (regex) while the tile is rendered. So "long_filename_with_number_at_the_end_001.jpg" becomes ["long_filename_with_number_at_the_end_","001.jpg"].
Now I want to include these strings in two spans inside a parent div, while the right span is as large as needed. and the left span fills the rest. The left span shall get the text-overflow:ellipsis property.
I found this answer, which is quite near to mine. I changed a little bit, but I did't get what I expected.
* {
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>Just switch #colA and #colB in your html document.
<div class="outer">
<div id="colB">001.jpg</div>
<div id="colA">long_filename_foo_bar</div>
</div>
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다