Hi! First time poster here. I did a bit of searching for this problem, as it would seem to be an issue someplace out there, but didn’t find anything specific. So here goes I need to display some VERY long strings of text (titles) within pull-down and scroll form elements on a data entry screen. This WORKS in Netscape by applying the white-space:normal style to the <select> tag, and the long text wraps within the drop-down form element. Unfortunately IE just truncates the long title to the width of the form element. It would seem that word-wrap should work. MSDN site states that the word-wrap style can be applied to either the <select> or <option> element, but I’ve yet to see it work.
<html>
<body>
<table style="width:400px; height:200px;">
<tr>
<td style="width:50%">
<select style="word-wrap:break-word;width:100%;">
<option>An very large and seemingly endless title that needs to be nested in a much smaller space on the screen than can possibly be accomplished with my limited skills</option>
<option>Second Title</option>
<option>Thrid Title</option>
</select>
</td>
<td style="width:50%">
<select style="word-wrap:break-word;width:100%;">
<option>Short Title</option>
<option>Short Title</option>
<option>Short Title</option>
</select>
</td>
</tr>
</table>
</body>
</html>
Okay not the greatest html, but I hope you get the idea of what I’m trying to do. Anyone ran up against this or have any ideas?
There’s no ‘word-wrap’ property in CSS (unless it’s a Microsoft-specific extension). Do you by any chance mean ‘white-space’? IIRC, Microsoft has some proprietary properties for that, but CSS 2.1 only allows normal, pre, nowrap, pre-wrap and pre-line.
I think IE relies heavily on Windows components when rendering form controls, especially <select> elements. Styling these are notoriously difficult.
I tried already with <br /> tags in the <option> tag…
<option>An very large<br />
and seemingly endless <br />
title that needs to be nested <br />
in a much smaller space on the<br />
screen than can possibly be<br />
accomplished with my limited skills</option>
<option>Short Title</option>
<option>Short Title</option>
But still, doesn’t work.
I can CSS the width of the dropdown menu… but not to break the lines of text.
That’s invalid. An <option> tag can only contain text (including entity references and numeric character references). It can’t contain any HTML markup.
I need to display some VERY long strings of text (titles) within pull-down and scroll form elements on a data entry screen. This WORKS in Netscape by applying the white-space:normal style to the <select> tag, and the long text wraps within the drop-down form element. Unfortunately IE just truncates the long title to the width of the form element. It would seem that word-wrap should work. MSDN site states that the word-wrap style can be applied to either the <select> or <option> element, but I’ve yet to see it work.