Click here to Skip to main content
15,867,568 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hi guys i would like to know is there any feature in css that will give a paragraph overflow?
Assuming i have this paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent congue purus quis nisi bibendum convallis vel non leo. Vivamus varius, lorem et gravida faucibus, mauris arcu laoreet metus, at eleifend neque eros eget erat. Sed sed lectus vel nibh suscipit convallis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec ipsum tortor, interdum id sagittis eu, porta vitae mauris. Donec nec porttitor risus. Maecenas justo tellus, accumsan vitae lacinia non, rutrum dignissim leo. Vestibulum vestibulum erat a ipsum gravida auctor. Duis aliquet nisi nec tortor euismod tempus.

Quisque malesuada semper tempor. Etiam placerat rutrum erat, vitae euismod massa tempor quis. Ut ac massa nunc, eget dapibus metus.


Now I want to apply a text-overflow here like i just want it to be like this

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent congue purus quis nisi bibendum convallis vel non leo. Vivamus varius, lorem et gravida faucibus, mauris arcu laoreet metus, at eleifend neque eros eget erat. Sed sed lectus vel nibh suscipit convallis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas...


So basically when the paragraph text exceed the height of let say 70px. It will automatically apply the text-overflow: ellipsis, is there any css code that can do this? based from my googling the only available text-overflow is a single line so the ellipsis only apply on single line paragraph like so
A single line paragraph that w...


But i want it to apply multiple lines... is it possible? assuming i want my paragraph to have this css property

.myParagraph{
  width: 150px;
  height: 75px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;

}

so i want it only to apply the text-overflow ellipsis when the paragraph reach the 75px height.... how can i do this?
Posted

public static string Ellipsis(this string str, int maxLength)
{
  if (str.IsNullOrEmpty()) return str;
  
  if (offset != 0)
    maxLength -= offset;
  if (str.Length > maxLength)
    return str.Substring(0, maxLength > 2 ? maxLength - 2 : 0) + "...";
  else
    return str;
}


i use something like this it set max length, doesnt work on height but then i couldnt be bothered to calc the font size, line height etc etc and derive a value i just trail and error it in 5 seconds each time hope it helps you.
 
Share this answer
 
Comments
Sergey Alexandrovich Kryukov 13-Feb-12 21:32pm    
"..." is not typographically correct ellipsis, the correct one is '…', should be expressed as character entity '…'.

Besides, the whole idea won't work. You are counting characters. It could potentially work is you used monospace font. You cannot assume that the pixel length of any particular string is known.

--SA
killabyte 13-Feb-12 21:58pm    
hence why i said it works via a max length of string passed and not pixels ...
Madzmar25 13-Feb-12 22:32pm    
my very first approach was like killabyte... but i didn't seem to work as i expected. specially when some test input was place like all characters with '.' or with 'i' it still gives a space on the height portion. i would really love something that works well just like the "text-overflow: ellipsis;" have.
try this

HTML
<html>

<style type="text/css">
    .ellipsis
    {
      line-height: 1.2em;
      height: 1.2em;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      width: 100%;
      -o-text-overflow: ellipsis;
      -moz-binding: url(moz_fix2.xml#ellipsis);
    }

</style>
<div id="Content" style="width: 190px; border: 1px solid green">
	<div class="ellipsis">123456123456123456123456123456123456</div>
</div>
</html>
 
Share this answer
 
Comments
Madzmar25 14-Feb-12 19:47pm    
no thats not what im looking for... i was looking for an output like this

------------------------------------------------------------------------------
<pre>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent congue purus quis nisi bibendum convallis vel non leo. Vivamus varius, lorem et gravida faucibus, mauris arcu laoreet metus, at eleifend neque eros eget erat. Sed sed lectus vel nibh suscipit convallis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec ipsum tortor, interdum id sagittis eu, port...
</pre>
------------------------------------------------------------------------------
Madzmar25 14-Feb-12 19:49pm    
as you can see its a normal paragraph but when the <p> tag reaches its specified height of let say 75px then the rest of the text overflowing that paragraph will be hidden and change to ellipsis..

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900