HTML & CSS
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?
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.
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...
I couldn't see a way to do this by any normal means.
Perhaps you may need to re-think the design
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.
That's invalid. An
<option> tag can only contain text (including entity references and numeric character references). It can't contain any HTML markup.
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.