Shortening the name means that the user won't be able to know true name of the image (file). This hardly can be acceptable. You can show the full name in a UI element which is horizontally scrollable. This is the usual UI style. For a text control, this is the default. You can make this control read-only.
The solution with
input
would have one problem: the scroll bar is not shown, so there is no indication of the fact that the name is not fully shown. More sophisticated solution could be based on
textarea
, and the style should be far from default. We need to make it a single-row input, prevent wrapping and show the scroll bar. Here is the simple code sample showing these effects:
<html>
<head>
<title>Single line with scroll bar</title>
<style type="text/css">
textarea {
overflow-x: scroll;
white-space: nowrap;
resize: none;
width: 10em;
}
</style>
</head>
<body>
<textarea rows="1" readonly="readonly">Some long, very long name, really long</textarea>
</body>
</html>
—SA