Friday, November 15, 2013


Today I learned something new and quite interesting. Usually text-truncation is done with some javascript. Nowadays we can do using text-overflow. It very elegant and simple solution and it work just fine in all browsers. We just have to add text to a div or paragraph and create a class. For example:

<div class="oneline" title="text">text</div>

CSS: .oneline { text-overflow : ellipsis; white-space : nowrap; width : 100%; overflow : hidden; padding: 0px; margin: 0px; }

This combination will truncate the long lines in div and gives a very good tooltip. I think, it's the most elegant solution I saw in a last time I work with HTML.

No comments:

Post a Comment