473,503 Members | 1,687 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Truncating a string depending on it's size

27 New Member
Ok, let's say I have a 50px div that is used to display text gathered from a db, a file, or whatever. However, if the text happens to be too big to fit in the div, I want it truncated, and I want to fit as much text as possible inside the div, but also append a (...) in the end (the div's overflow is already set to hidden).

Example words and expected results:
OOOOOOOOOOOOOOOOOOOOOO
iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii
Expected results would be:
OOOOOOO(...)
iiiiiiiiiiiiiiiiiiiiiiiiiiii(...)

(As you can see, 28 i's take about the same amount of space as 7 O's, and changing the font is not an option.).

I don't think I'm the first person to face this issue so I was wondering if there was a known way to do this sort of thing I'm not aware of.
Mar 29 '07 #1
4 1577
mrhoo
428 Contributor
You can set font-family:monospace in css and size the element in ems instead of px.
Mar 29 '07 #2
alejandro
27 New Member
I could do that, the problem is I can't do that (client specs :P .).

I think the way to go is offsetWidth.
I could set the overflow back to visible, and if the div's offsetwidth is larger than what it is supposed to be, I could eliminate letters from the text within it until the offset goes back to it's default size... seems a bit ugly tho :P
Mar 29 '07 #3
alejandro
27 New Member
No ideas? suggestions? witty remarks about the fact that I souldn't be doing this at all?
:(
Mar 30 '07 #4
Romulo NF
54 New Member
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2.  
  3. <html>
  4. <head>
  5. <title>Overflow text</title>
  6. </head>
  7.  
  8. <style>
  9.  
  10. #holder {height:103px; width:325px; display:block; overflow:hidden; border:1px solid #000;}
  11.  
  12. </style>
  13.  
  14. <body>
  15.  
  16. <div id="holder">
  17. <span>
  18. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque mauris sem, tempus sed, ultricies nec, sagittis nec, nisi. Nullam nulla dui, tempus vitae, commodo sit amet, molestie consectetuer, quam. Donec sed est. Morbi lacinia iaculis urna. Nullam molestie feugiat leo. Donec pharetra, nisi ac fringilla pretium, enim tellus tempor libero, in consequat est leo at lectus. Nullam quis nibh at ipsum nonummy sodales. Nullam nibh. Vivamus nulla. Nunc pretium lectus a est. Morbi ut quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla in risus eget purus elementum convallis. Duis quam libero, blandit vulputate, sodales non, gravida id, nibh.
  19. </span>
  20. </div>
  21.  
  22. <script>
  23.  
  24. window.onload = organizeText("holder")
  25.  
  26. function organizeText(elm) {
  27. textHolder = document.getElementById(elm);
  28. text = textHolder.getElementsByTagName("span")[0];
  29.  
  30.     while (text.offsetWidth > textHolder.offsetWidth) {
  31.     conteudo = text.innerHTML
  32.     conteudoTemp = conteudo.substring(0,conteudo.length-1);
  33.     text.innerHTML = conteudoTemp
  34.     }
  35.  
  36.     while(text.offsetHeight > textHolder.offsetHeight) {
  37.     conteudo = text.innerHTML
  38.     conteudoTemp = conteudo.substring(0,conteudo.length-1);
  39.     text.innerHTML = conteudoTemp    
  40.     }
  41.  
  42.     text.innerHTML = text.innerHTML.substring(text.innerHTML.length-3, text.innerHTML,length) + "..."
  43. }
  44.  
  45. </script>
  46.  
  47. </body
  48. </html>
  49.  
  50.  
There´s small example.
You can improve it to satisfy your needs.
Mar 30 '07 #5

Sign in to post your reply or Sign up for a free account.

Similar topics

4
1766
by: Jeremy | last post by:
I have an include file which has some text such as: The quick brown fox jumped over the lazy dog I want to have a certain amount of that text to display on one page wherein the user can click...
4
21930
by: qazmlp | last post by:
Can anybody comment(& suggest improvements) on the following implementation that is for truncating the character buffer contents to the desired length? Truncating char array void...
5
5417
by: VISHNU VARDHAN REDDY UNDYALA | last post by:
Hello, Can someone over here help me in truncating a float variable. I mean if PI=3.14159 ...How can I get to read the first two or first three decimal values with out rounding them. Any...
5
37538
by: VM | last post by:
How can I truncate a string? For example, if I have a string containing "Hello All" but the space reserved for this string is of 4 chars, how can I truncate it to "Hell"? Would I need to create my...
4
3373
by: DotNetJunkies User | last post by:
I am calling a VB6 dll from a vb.net windows application that returns an array of strings. My issue is it seems to truncate after a NULL character. For Example VB 6 is returning a string with the...
17
13706
by: AMP | last post by:
Hello I get 2 errors in the following code that I cant Debug without some help. They are both in the TryParse function. Seems simple enough.The Errors are Below. private void...
4
2560
by: nothix9 | last post by:
Hello guys, Ive been working this for 2 days, I am required to position a string using drawstring but the problem is its dynamic and changes depending on the database or source. A quick fix I thought...
3
2036
by: Francois | last post by:
Hello, How can I size my text to fit in a datagrid column ? I do not want the datagrid go multiline. I am using WEB Forms, not windows form, so CreateGraphics ans MesasureString do not work....
15
5178
geolemon
by: geolemon | last post by:
I'm having a seriously Twilight Zone moment: In the code below, I'm building a SQL command into a string variable, declared at the top of my code. Then, I connect to the database and try to...
0
7202
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
7086
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
7280
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
1
6991
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
0
5578
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...
1
5014
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...
0
3154
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
736
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
0
382
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.