CSS - Automatic Resizing Text Field

Is there a way to define a text style where a dash and a space is automatically inserted after the text?

If I want this:

Subtitle and then content

To look like this:

Subtitle - and then content

How can I do that?

Thanks

HTML

<div class="unitWide">
<div class="labelRight" id="appt"> Reaction</div>
<div class="widget"><input type="text" name="Name" size="30"/></div>
</div>

<div class="unitAutoHeight">
<div class="labelRight">Description</div>
<div class="widget"> <textarea name="comments"class="wideComment" rows="6" cols="28"></textarea></div>

</div>

CSS

.unitSmall, .unitWide, .unitSmaller, .unitAutoHeight, .unitPair, .unitCal {
float: left;
z-index:1;
width: 100%;
height: 2.4em;
padding-bottom: 6px;
}

.unitAutoHeight {
height: auto;
}

input, .wideComment {
font-size: 16px;
padding: 3px;
background: transparent;
background-image: url(../images/inputbackground.png);
border: none;
color: #3f3f3f;
font-weight: bold;
width: 23.6em;
}


Hi y'all, Ive got form elements (here called 'units') stacked vertically and left floated to ensure alignment in a fixed-width form.

Im trying to get the comment input box to stretch vertically, and add rows as the user inputs longer text. Basically I want to save space on the form by not specifying a predetermined number of rows (which is not the case right now, theres 6 rows), but to let it expand and not hide the overflow or worse, display a sidebar. Ive tried everything, looked in javascript forums, cant find it! Ideally it would behave like the new facebook message or wall post text box.

Thanks

Hello everybody, I present myself, I'm Alessandro a new member from Italy.
I found this forum very useful.
Hope to find good answers following topics and hope to help someone when I'm able to.
Ciaooooo

I have this issue for the moment:

I have a homepage layout with 3 columns with an images and captions inside everyone.
I have a subtitle also, and I want the subtitle extends orizzontally over the div without resizing it and without rollbars.

see a screenshot he http://www.alessandroboselli.it/foto/screenshot.jpg

and here is the involved CSS code:

Code:

/* Homepage layout --- start */
#wrapper {
	text-align: left;
	margin: 0px auto;
	padding: 0px;
	border:0;
	width: 980px;
}

#side-left {
	float: left;
	width: 300px;
}

#center { 
	float: left;
	width: 300px;
}

#side-right {
	float: right;
	width: 380px;
}
/* Homepage layout --- end */


/* Homepage images --- start */
.homepageimage {
	position:relative;
	float:left; /* optional */	
	top:40px;
	-moz-box-shadow: 3px 3px 4px rgba(0,0,0,0.5);
	-webkit-box-shadow: 3px 3px 4px rgba(0,0,0,0.5);
	box-shadow: 3px 3px 4px rgba(0,0,0,0.5);
	/* For IE 8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#5f5f5f')";
	/* For IE 5.5 - 7 */
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#5f5f5f');
}
.homepageimage a {
	text-decoration: none;
	float: left;
}
.homepageimage a .homepageimagetitle {
	display: block;
	font-family: 'Molengo', Arial, serif;
	font-size: 18px;
	font-style: normal;
	font-weight: 400;
	text-shadow: none;
	text-decoration: none;
	letter-spacing: 0.050em;
	word-spacing: 0em;
	line-height: 1.2;
	padding: 10px 0;
	background: #111;
	filter:alpha(opacity=75);
	opacity:.75;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
	color: #fff;
	position: absolute;
	top: 0px;
	left: 0px;
	padding: 5px;
	margin: 0;
	width: 190px;
	/*position: absolute;
	right: 20px;
	bottom: 20px;
	filter:alpha(opacity=65);
	opacity:.65;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)"; /*--IE 8 Transparency--*/
}

.homepageimage a .homepageimagesub {
  	display: block;
 	font-family: 'Buda', serif;
 	font-size: 22px;
 	font-style: normal;
 	font-weight: 400;
 	text-shadow: none;
 	text-decoration: underline;
 	text-transform: none;
 	letter-spacing: 0.007em;
 	word-spacing: 0em;
 	line-height: 1.15;
	padding: 10px 0;
	background: #111;
	filter:alpha(opacity=75);
	opacity:.75;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
	color: #fff;
	position: absolute;
	top: 215px;
	left: 0px;
	padding: 5px;
	margin: 0;
}

Hello,

I have just got round to testing my site on my iPhone for continuity and I have found a weird problem. Here is the situation, on my blog I sometimes need to show blocks of code so I naturally use <pre></pre> tags. Some blocks of code are too wide for my content column so I coded up a little expander box with jQuery. This works fine and I'm really happy with it but the iPhone manages to screw it up. If you can test a page on my blog (rendernaut[dot]com) and navigate to a code block, you can see it is just a simple toggle switch. But when this is done an an iPhone the font inside of the block increases proportional to the width. Its the only browser I've tested which does it, does anyone have any answers to why this is?

Thanks

I'm assuming this is going to be a CSS issue. I have a table cell which contains text, and for the sake of accessibility, I'm allowing text resizing and would like to prevent the table cell from changing in height when the font size is increased. Basically, as the font size increases, the width of the cell is the only thing that will change, not the height. First, is this possible? Second, if so how can this be achieved?

I'm pretty sure that I've seen other sites do this, just can't remember where.

Thanks in advance!