Home/ Questions/Q 6780915
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T16:33:44+00:00

Quick disclaimer: I saw some plugins that truncate text strings but they do not

  • 0

Quick disclaimer: I saw some plugins that truncate text strings but they do not do it the way I need it…

I need to truncate the text by limiting the space allocated to it. For example, if i have a block of text and it is placed in a div that has dimensions preventing entire text to be shown, I’ like to show as much as possible and then append helix at the end of the string.

I think I can use overflow:hidden, but how do I add “…”? Also, is it possible to determine if the text needs more space than the area provide? 

<div style="width: 300px; height: 100px; border: 1px solid #ccc; overflow:hidden">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis facilisis risus vel mi placerat ut bibendum dui tempus. In dictum quam eu sem condimentum elementum. Cras id urna eget turpis feugiat porttitor. In hac habitasse platea dictumst. Cras tincidunt risus id sapien sagittis feugiat interdum orci adipiscing. Sed venenatis neque nec nibh mattis laoreet. In ut sapien in felis posuere feugiat. Nulla vulputate, augue nec elementum volutpat, justo nisl vulputate tellus, eget blandit lectus enim at ante. Donec posuere augue a orci sollicitudin ut imperdiet ante varius. 
</div>

DEMO

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    First here is a post on how to find the width of text in a div: Calculating text width

    Once you have this width you could take the percentage of how wide your wrapping div is compared to the text width.

    Then you could split your text into an array of chars and take the percentage above and apply it to that array to get your estimated desired text length.

    something like this jsfiddle

    http://jsfiddle.net/RGybB/

    Update to show how percentage is calculated

    http://jsfiddle.net/RGybB/2/

    • 0