Question

I’m not too good with css so this is probably a stupid question but…

I have a form which has some javascript acting on it so as a user types into one of the form inputs, the text type appears in a div on the same page.

The div at the minute is width:960px. So when I type into the form input and the text appears in the div, when it gets to 960px it takes a new line and screws up my layout.

EDIT: I want it the div to be a maximum of 960px x 30px and I want the text to be able to fit into that but not make it any bigger, not overflow onto a new line and not make scroll bars appear. If the text was still there and just not visable that would do. Like if it went on beyond the div but just wasnt visable. That’d do

I’ve tried setting max-height and max-width on the div but that didn’t work (possibly because the javascript is acting on it after the css has been read?)

I’ve also set the max-length for the form input but since that’s characters and some characters are longer/in caps etc… that means that some sentences will seem very short, others long eg iiiiiiiiiiii and wwwwwwwwww (10 chars each)

Any ideas on how to solve this?

EDIT:
here’s some code – the html for the form input

<div class="input text required">
    <label for="CampaignTitle">Title</label>
    <input name="data[Campaign][title]" type="text" maxLength="76px" id="CampaignTitle" />
</div>

the div that gets updated:

<div id="titleBarWrap">
    <div id="titleBar" style="max-width:960px; max-height:76px;"></div>
</div>

The css:

#topbar{background:url(../img/green/topBg.gif) repeat-x;height:67px;clear:both;}
#titleBarWrap{width:960px;margin:auto;font-size:32px;font-weight:bold;color:#FFF; line-height:67px;}
#mainCampContentWrap{width:960px;margin:auto;padding:24px;background:url(../img/green/mainCampContentWrapBg.gif) repeat-y;}

The JS:

$('#CampaignTitle').keyup(function() {
    $('#titleBar').text(this.value);
}); 

Answer 1

I think:

overflow:hidden;

could help you