Truncating a string depending on it's size

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • alejandro
    New Member
    • Mar 2007
    • 27
    #1

    Truncating a string depending on it's size

    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:
    OOOOOOOOOOOOOOO OOOOOOO
    iiiiiiiiiiiiiii iiiiiiiiiiiiiii iiiiiiiiiiiii
    Expected results would be:
    OOOOOOO(...)
    iiiiiiiiiiiiiii iiiiiiiiiiiii(. ..)

    (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.
    Tags: None
    • mrhoo
      Contributor
      • Jun 2006
      • 428
      #2
      You can set font-family:monospac e in css and size the element in ems instead of px.

        Comment

        • alejandro
          New Member
          • Mar 2007
          • 27
          #3
          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

            Comment

            • alejandro
              New Member
              • Mar 2007
              • 27
              #4
              No ideas? suggestions? witty remarks about the fact that I souldn't be doing this at all?
              :(

                Comment

                • Romulo NF
                  New Member
                  • Nov 2006
                  • 54
                  #5
                  Code:
                  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Overflow text</title>
</head>

<style>

#holder {height:103px; width:325px; display:block; overflow:hidden; border:1px solid #000;}

</style>

<body>

<div id="holder">
<span>
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.
</span>
</div>

<script>

window.onload = organizeText("holder")

function organizeText(elm) {
textHolder = document.getElementById(elm);
text = textHolder.getElementsByTagName("span")[0];

	while (text.offsetWidth > textHolder.offsetWidth) {
	conteudo = text.innerHTML
	conteudoTemp = conteudo.substring(0,conteudo.length-1);
	text.innerHTML = conteudoTemp
	}
	
	while(text.offsetHeight > textHolder.offsetHeight) {
	conteudo = text.innerHTML
	conteudoTemp = conteudo.substring(0,conteudo.length-1);
	text.innerHTML = conteudoTemp	
	}
	
	text.innerHTML = text.innerHTML.substring(text.innerHTML.length-3, text.innerHTML,length) + "..."
}

</script>

</body
</html>
                  There´s small example.
                  You can improve it to satisfy your needs.

                    Comment

                    Previous template Next
                    Working...