A note from A Beautiful Site’s founder: We developed Surreal to be easy for you and your clients. If you’re a web designer, you should take a look at the simple, hosted CMS that’s changing the way content is managed. Surreal integrates in moments and is trusted by over 18,000 websites. Try it out for free and let us know what you think! Visit Website »
When it comes to textareas, the concept of word-wrapping is not as easy as it should be. In most browsers, including Firefox, Safari, Chrome, and Opera, you can set the textarea’s wrap attribute to on oroff to achieve your preference. Internet Explorer, on the other hand, requires a special value for the wrapattribute.
To work around this problem, we need to first check for the browser type and go from there:
- If IE, update the wrap attribute to be either soft or off
- If not IE, clone the textarea, set the appropriate wrap attribute, and update the DOM
Here is a really simple jQuery plugin that I’ve created to do just that.
The jQuery Word-wrap Plugin
The plugin is really easy to use. Just make sure to include jQuery and the plugin in your page:
To enable and disable word-wrapping on-the-fly, simply call the wordWrap() method at any time:
You can use any standard jQuery selector. Note that browsers have word-wrapping enabled by default for textarea elements.
View a working demo of this plugin.
This plugin is provided to you as-is, at absolutely no cost. If you would like to support its development, feel free to contribute any amount you prefer via PayPal. As always, you are welcome to contribute code for bug fixes and feature enhancements as well. Either way, thanks for supporting our efforts!