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:
HTML:
<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