john_king — 2004-11-23T11:41:02-05:00 — #1
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.
<table style="width:400px; height:200px;">
<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>
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?
autisticcuckoo — 2004-11-23T12:57:09-05:00 — #2
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.
john_king — 2004-11-25T10:34:22-05:00 — #3
It's definately Microsoft specific, just wondering if anyone had found a way to make larger than the form elements within the <option> tag wrap...
paulob — 2004-11-25T11:31:46-05:00 — #4
I couldn't see a way to do this by any normal means.
Perhaps you may need to re-think the design
bulevardi — 2010-04-01T07:33:09-04:00 — #5
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>
But still, doesn't work.
I can CSS the width of the dropdown menu.... but not to break the lines of text.
autisticcuckoo — 2010-04-01T07:58:26-04:00 — #6
That's invalid. An
<option> tag can only contain text (including entity references and numeric character references). It can't contain any HTML markup.
paulob — 2010-04-01T08:01:07-04:00 — #7
You can't put breaks in the option element as it is not valid and won't work anyway.
You would need to script this function if you must have it.