How to remove ellipsis set by the browser by default? - html

Question

I've been given a task of displaying files hosted on a webserver(jekyll) via a webpage using iframe. Iframe lists all the files. Though the view is not as pretty as an embedded Google Drive link.
However, there are 2 major issues with this:
The filenames are being truncated - "abc..." and on the browser I see ellipses and I'm not able to reverse this.
All the pdf files are getting downloaded as opposed to opening in a new tab which would have been possible via embedding a Gdrive link (the idea is to move files to a static folder on the web server instead of Gdrive)
I have read most articles. Even if the second issue is not solvable, I am interested in learning how to solve the first issue.
I'm able to inject my own CSS like this:
<script>
$( document ).ready(function() {
$('iframe').each(function(){
console.log("here");
function injectCSS(){
$iframe.contents().find('head').append(
$('<link/>', { rel: 'stylesheet', href: '{{ site.col_url}}/static/xyz/xyz.css', type: 'text/css' })
);
}
var $iframe = $(this);
$iframe.on('load', injectCSS);
injectCSS();
});
});
</script>
I would like to see the complete file names being listed on my webpage. I am not allowed to use a scripting language since the whole system is built in Markdown format

Answer 1

Set the below option on your vhost file, if you are using Apache
IndexOptions NameWidth=*
Ref: https://www.networkworld.com/article/2311687/showing-long-file-names-in-apache-directory-listings.html

Answer 2

Use can use the directory plugin https://github.com/sillylogger/jekyll-directory to display the files in your static folder. This gives full filenames and its better than using iframes. By default your chrome browser renders pdf and jpg images in a new tab as opposed to downloading them. Just take care of bad urls. To get the last modified date, use the gem file https://github.com/gjtorikian/jekyll-last-modified-at
Your code looks like this:
{% directory path: <provide a path to your static folder> %}
<a href="<static_path>/{{ file.name }}" datetime="{{ file.date |
date_to_xmlschema }}">{{ file.name }}</a>
{% enddirectory %}
Additionally, to get the last modified date:
Last Modified on {{ page.last_modified_at|date_to_string}}