Safari does not allow text to wrap within a SPAN tag
Does anyone know how to force Safari to wrap text within a SPAN tag?
Here are two examples (see below), one with SPAN and one with DIV. DIV has no trouble wrapping the text, but SPAN wants nothing to do with it. I am able to get this to work within IE but not Firefox (pc and mac version). Ok... maybe it may not be a Safari issue, but I am still needing to wrap the text. Any ideas?
I know that SPAN is an INLINE element and DIV is a FLOW (which is either INLINE or BLOCK depending upon it's content). But there has to be a trick somewhere to get the text to wrap.
The reason why I need to use span, is to allow the text to be constrained in a "box" like a TEXTAREA tag, but yet without the baggage that TEXTAREA puts upon Safari when you are trying to sort a table with over 4000 nested TEXTAREAs. DIV does work great in most areas and produces a sub-second sort time compared to about 3 minutes when using TEXTAREA tags. BUT the issue I am having is that if I have an anchor on either side of the DIV within the table cell, they are stacked instead of side-by-side. ie... the following will be stacked if the proper styles are used:
<pre><td><a>ABC</a><div>Some Long Text</div><a>123</a></td></pre>
The following are side-by-side if the proper styles are used, but the text will not flow within the SPAN tag:
<pre><td><a>ABC</a><span>Some More Long Text</span><a>123</a></td></pre>
The examples are below
NOTE: Just incase this discussion board does not allow for the proper display of these tags I have provided the source code. You may need to copy and paste the example in to an empty text file, save it with the HTML extension and then open it in Safari. Sorry for the trouble!
<pre>
<html><head><title>Safari Does Not Wrap Text in a SPAN tag</title></head>
<body>
<b>SPAN tag</b>
<span style="width:200px;height:90px;overflow:auto;border: 1px solid red;">1234567890 1234567890 1234567890 1234567890
1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890
1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890
1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890
1234567890 1234567890 1234567890 1234567890 1234567890 </span>
<br /><br >
<b>DIV tag</b>
<div style="width:200px;height:90px;overflow:auto;border: 1px solid red;">1234567890 1234567890 1234567890 1234567890
1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890
1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890
1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890
1234567890 1234567890 1234567890 1234567890 1234567890 </div>
</body></html>
</pre>
SPAN tag
1234567890 1234567890 1234567890 1234567890
1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890
1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890
1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890
1234567890 1234567890 1234567890 1234567890 1234567890
DIV tag
Thanks for your time!
Here are two examples (see below), one with SPAN and one with DIV. DIV has no trouble wrapping the text, but SPAN wants nothing to do with it. I am able to get this to work within IE but not Firefox (pc and mac version). Ok... maybe it may not be a Safari issue, but I am still needing to wrap the text. Any ideas?
I know that SPAN is an INLINE element and DIV is a FLOW (which is either INLINE or BLOCK depending upon it's content). But there has to be a trick somewhere to get the text to wrap.
The reason why I need to use span, is to allow the text to be constrained in a "box" like a TEXTAREA tag, but yet without the baggage that TEXTAREA puts upon Safari when you are trying to sort a table with over 4000 nested TEXTAREAs. DIV does work great in most areas and produces a sub-second sort time compared to about 3 minutes when using TEXTAREA tags. BUT the issue I am having is that if I have an anchor on either side of the DIV within the table cell, they are stacked instead of side-by-side. ie... the following will be stacked if the proper styles are used:
<pre><td><a>ABC</a><div>Some Long Text</div><a>123</a></td></pre>
The following are side-by-side if the proper styles are used, but the text will not flow within the SPAN tag:
<pre><td><a>ABC</a><span>Some More Long Text</span><a>123</a></td></pre>
The examples are below
NOTE: Just incase this discussion board does not allow for the proper display of these tags I have provided the source code. You may need to copy and paste the example in to an empty text file, save it with the HTML extension and then open it in Safari. Sorry for the trouble!
<pre>
<html><head><title>Safari Does Not Wrap Text in a SPAN tag</title></head>
<body>
<b>SPAN tag</b>
<span style="width:200px;height:90px;overflow:auto;border: 1px solid red;">1234567890 1234567890 1234567890 1234567890
1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890
1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890
1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890
1234567890 1234567890 1234567890 1234567890 1234567890 </span>
<br /><br >
<b>DIV tag</b>
<div style="width:200px;height:90px;overflow:auto;border: 1px solid red;">1234567890 1234567890 1234567890 1234567890
1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890
1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890
1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890
1234567890 1234567890 1234567890 1234567890 1234567890 </div>
</body></html>
</pre>
SPAN tag
1234567890 1234567890 1234567890 1234567890
1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890
1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890
1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890
1234567890 1234567890 1234567890 1234567890 1234567890
DIV tag
1234567890 1234567890 1234567890 1234567890
1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890
1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890
1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890
1234567890 1234567890 1234567890 1234567890 1234567890
1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890
1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890
1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890
1234567890 1234567890 1234567890 1234567890 1234567890
Thanks for your time!
MacBook Pro 17", Mac OS X (10.4.7)