Solved

Text Overflow Property (elipse) in IE6 Input Field

Posted on 2009-07-01
2
1,378 Views
Last Modified: 2013-12-08
I am trying to implement Text Overflow in an Input field and having no luck.  Using the code below

It does not work.  However the same exact tags work if I make type = "button", and the white-space/text-overflow/overflow combination creates the required ellipses in a DIV or a TD

Anyone able to point me in the right direction for a truncated text field (using IE 6) that will replace overflowed text with an ellipse?  
<input type = "text" id="Text2"  style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display:inline-block; width: 145px; height: 25px;" />

Open in new window

0
Comment
Question by:thearniec
2 Comments
 
LVL 13

Accepted Solution

by:
Murali Murugesan earned 300 total points
ID: 24760391
I dont think text-overflow property would be applicable for text box. Here is how u can acheive the same through javascript

<input type = "text" id="Text2"  style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display:inline-block; width: 145px; height: 25px;" onkeydown="ellipsis(this.value,10);"/>

function ellipsis(txtValue,allowedwidth){
      var ellipsis_s = "...";
      if(txtValue.length == allowedwidth){
            document.getElementById('Text2').value = txtValue.substr(0,allowedwidth)+ ellipsis_s;
            document.getElementById('Text2').maxLength=txtValue.length;
      }else if(txtValue.length > allowedwidth +ellipsis_s.length){
            if(txtValue.substr(0,txtValue.length -1).length > allowedwidth){
                  document.getElementById('Text2').value = txtValue.substr(0,txtValue.length -1);
            }            
      }
}

-Murali*
0
 
LVL 12

Assisted Solution

by:Chad Haney
Chad Haney earned 200 total points
ID: 24790692
There is no attribute to set this for an input box, using javascript is going to be your only option in this case.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
jquery add something to a div 4 37
Basic JavaScript Question 3 38
.php tree directory? 5 55
Could you point how to give Bootstrap's open/ close menu effect ? 25 31
If you are a web developer, you would be aware of the <iframe> tag in HTML. The <iframe> stands for inline frame and is used to embed another document within the current HTML document. The embedded document could be even another website.
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

919 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now