Selecting Overflowing Text in IE

by Brett on January 21, 2009

I noticed a problem with how IE supports overflowing text today. The problem is that the text can not be easily selected (with a mouse) when using overflow: auto; and white-space: nowrap. Here is an example to demonstrate this problem.

This text is not easy to select in IE because it will not automatically scroll to the right when the user is selecting it

The HTML for this example is below:

<pre style="border: 1px solid black; overflow: auto; width: 250px; white-space: nowrap; height: 40px;">;This text is not easy to select in IE because it will not automatically scroll to the right when the user is selecting it</pre>

I was able to solve this problem by changing overflow: auto; to overflow: scroll; as can be seen below.

This text is not easy to select in IE because it will not automatically scroll to the right when the user is selecting it

The HTML for this example is below:

<pre style="border: 1px solid black; overflow: scroll; width: 250px; white-space: nowrap; height: 40px;">;This text IS easy to select in IE because it will not automatically scroll to the right when the user is selecting it</pre>

I do not love this solution as it will always show the scroll bars even when they are not needed. Until someone finds a better solution or IE handles this better I will have to put up with it.

Previous post:

Next post: