Nov 7, 2013

Truncate long text with CSS

Truncate Text CSS

While making websites we usually face width issues for long title text or headings. We can wrap that to next line or using some server side language we truncate it. But this can be done using CSS also.



 


 



[html]
<style type="text/css">
p {
width:170px;
margin:10px;
font-family:Arial;
font-size:14px;
}
p.truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>
<p title="I am a long text and I am wrapped to next line">I am a long text and I am wrapped to next line</p>
<p class="truncate" title="I am a long text and I am truncated">I am a long text and I am truncated</p>
[/html]

Demo:

No comments :

Post a Comment