I need some help with a coding issue I'm facing. I have a form where one of the inputs is connected to a JavaScript function that updates a div on the page as the user types. However, I want to limit the width of this div to 900px and make sure it only displays one line of text.
Currently, I have set the overflow property of the div to hidden and restricted the length of the input using maxlength. But due to variations in spacing between characters in different browsers, the number of words that fit in the div varies.
I've tried using a CSS reset to standardize browser behavior, but it doesn't seem to address the text spacing issue. Would adjusting the character spacing with CSS be my only solution? Are there any other suggestions?
EDIT
Here's the CSS reset code I'm currently using:
html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,select,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,button,caption,cite,code,dfn,em,input,optgroup,option,select,strong,textarea,th,var{font:inherit}del,ins{text-decoration:none}li{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:baseline}sub{vertical-align:baseline}
The font size being used is Arial at 32px.