Windows style Icon and Filename in HTML using CSS

Question

I couldn't find on the internet. If there is a link similar to my question do let me know.

I want to achieve style like windows icon and filename in HTML using CSS. Check attached image. In below case filename is long without space in it but it is showing properly.

Filename: robot_circuits_computer_technology_desktop_1680x1050_hd-wallpaper-967920.jpg

I tried following css property with different values and different group of property.

text-overflow:ellipsis;
overflow: hidden
width: xxpx;
white-space:nowrap;
word-wrap:break-word;

enter image description here

[This question could be helpful](http://stackoverflow.com/questions/856307/wordwrap-a-very-long-string). — misterManSam, Feb 09 '14 at 09:29

score 0 · Answer 1 · edited Mar 17 '14 at 22:34

0

CSS property text-overflow:ellipsis works right the text is one line only.

If you need ellipsis on the end of the multi-line text, you must use a jQuery plugin.

For example:

edited Mar 17 '14 at 22:34

Vlad Schnakovszki

8,434
6
80
114

answered Mar 17 '14 at 22:10

user3371571

23
1
5

Windows style Icon and Filename in HTML using CSS

1 Answers1