CSTrüter HomeArticlesDownloadsAbout meContact me
How to enable the filestream feature in SQL 2008 - Alternative way to store blobs(files) via SQL 2010-08-21 19:31:56
How to create a Singleton Pattern in C# 2010-08-10 22:52:52
How to prevent that threads access shared resources concurrently via Monitor. 2010-08-06 15:31:15
A quick review of the book PHP 6 and MySQL 5 for Dynamic Web Sites: Visual QuickPro Guide written by Larry Ullman 2010-08-04 21:48:58
How to prevent that threads access shared resources concurrently via Mutex. 2010-08-03 14:42:36
How to stop propagation of javascript events 2010-07-25 21:59:29
Post about how Pete the web developer fixed his sitemap 2010-07-17 15:12:02
How to setup an out of process session service 2010-07-08 17:51:46
How to display/add images from/to a SQL Database 2010-07-04 23:15:15
How to register a custom URL protocol handler 2010-06-28 20:34:01
Creating a WYSIWYG textbox for your website is actually quite simple. 2007-02-01 12:00:00
Move items between two listboxes in ASP.net(C#, VB.NET) and PHP 2008-06-12 17:07:43
Firefox word wrapping issues 2008-06-09 09:51:21
Populate a TreeView control in a windows application. 2009-08-27 16:01:03
2007-02-22 12:00:00
While working on my new site, I wrote a quick little console application in C# to insert a million records into my SQL database(dummy data), to see how well my database will perform with tons of data. The database performed superbly, but I noticed something else, the content in my side bar, didn't wrap correctly. In IE the content stretched the divs, in Firefox the content simply ignored the divs completely. So I thought to myself, cool, I will fix this using CSS, then added the word-wrap style in my CSS, everything looked fantastic, until I opened it up in Firefox - Noooooooo. I searched for hours on google, but couldn't find a working solution, until someone mentioned the wbr tag (word breaking tag) - basically you'll have to put a wbr tag, after every letter, I decided to write a quick javascript to take care of this - I made a C# version as well, but had a few concerns about how that might affect SEO. <html> <head> <title>word wrapping</title> <style type="text/css"> .content { border:1px solid black; width:160px; overflow: auto; } .wordwrap { word-wrap:break-word; } </style> <script type="text/javascript"> window.onload = function() { if (window.attachEvent == undefined) { var tag = document.getElementsByTagName("span"); for (var i = 0; i < tag.length; i++) { if (tag.item(i).className == "wordwrap") { var text = tag.item(i).innerHTML; tag.item(i).innerHTML = text.replace(/(.*?)/g, "<wbr />"); } } } } </script> </head> <body> <div class="content"> <span class="wordwrap">Pneumonoultramicroscopicsilicovolcanoconiosis</span> is the longest word in english </div> </body> </html> What happens here is very simple, I place looooonnngggg words into span (can make it any tag you want) tags, and assign the wordwrap css class to them, next I loop through all span tags on the page (If we're in firefox), and search for all span tags that have the wordwrap css class assigned to them, when I find one, I use a regular expression, to add a wbr tag after each letter. Not a very cool situation, I hate the whole idea of having to write workarounds to make a browser behave in a certain manner - but sometimes one just have to live with certain things (or in this case you can always join the firefox dev team and fix it yourself).
<html> <head> <title>word wrapping</title> <style type="text/css"> .content { border:1px solid black; width:160px; overflow: auto; } .wordwrap { word-wrap:break-word; } </style> <script type="text/javascript"> window.onload = function() { if (window.attachEvent == undefined) { var tag = document.getElementsByTagName("span"); for (var i = 0; i < tag.length; i++) { if (tag.item(i).className == "wordwrap") { var text = tag.item(i).innerHTML; tag.item(i).innerHTML = text.replace(/(.*?)/g, "<wbr />"); } } } } </script> </head> <body> <div class="content"> <span class="wordwrap">Pneumonoultramicroscopicsilicovolcanoconiosis</span> is the longest word in english </div> </body> </html>
Thanks Christoff, Great workaround, even after 2 years no better solution. Cheers
Great scripting ..Thank u
thanks. it works
Glad to help, let me know if you've got any other issues.
THANKS Chistoff, this is perfect:- window.onload = function() { if (window.attachEvent == undefined) { var tag = document.getElementsByTagName("span"); for (var i = 0; i < tag.length; i++) { if (tag.item(i).className == "wordwrap") { var text = tag.item(i).innerHTML; if ((text.indexOf('<wbr>') < 0)) { tag.item(i).innerHTML = text.replace(/(.*?)/g, "<wbr />"); } } } } }
Hello, I tried your script "wordwrap" and it works well, but with one major problem. it is dependant upon which <a href I go to having clicked on the box AND then having pressed the BACK BUTTON. Please take a look at the problem, i hope you can fix it for me. Look at this simple page which I have written regarding the problem: http://www.nigels.de/ff10.html the first box(div)leaves a lot of <WBR> tags in there having visited this page: http://www.nigels.de (my homepage, I am not spamming) but the second box(div) is OK http://www.nigels.de/new.html. I dont understand too much about JS, so please bear that in mind when you answere. THX dododidi
Thanks for this logic it is useful for very good thanks
How would I use this script to accept info from the screen, such as text from a text area with a specified character limit?
Thanks for ur great script. It help me to completed my tasks. GREAT GREAT GREAT.
Hi Mike I wondered when someones going to ask that question, hehe. My initial thought when I wrote this, was to recursively iterate through the elements within a tag and insert wbr tags accordingly - which isn't all that great since that will have a performance penalty (thank you Javascript) if you've got thousands of nodes. Thats when I decided to simply use specific tags and only change them, and simply apply them to nodeless areas which might break our styles in FF, and assure there is no html within them. for example: <span class="wordwrap">the rain in llllllllllllllllllllllllloooooooooooooooooooonnnnnnnnnnggggggggggggggggggword falls mainly</span> <a href=""><span class="wordwrap">on some plain</span></a> <span class="wordwrap">Some text some text some text evenllllllllllllllllllllllllllllooooooooooooooooooonnnnnnnnnnngggggggggggggeeeeeeeeeeeerrrrrrrrrrrr word</span> a server side solution would make more sense if you do need this functionality, like in C# for example we'd match the html with a regular expression, and work replace text between indexes it returns MatchCollection matches = Regex.Matches(html, @"<(.|\n)*?>"); but like I said in the post i've got some SEO concerns if we go this route. (thats why i prefer it to live and die in the actual browser)
1 2 Last / 2 Pages (14 Entries)
The company I am currently working for as software developer.
Collection of C# snippets 2010-05-22 01:06:19
Collection of MS SQL snippets 2010-05-22 00:55:15
Collection of JavaScript snippets 2010-05-22 00:37:57
Collection of ASP.net snippets 2010-05-22 00:29:56
Collection of PHP snippets 2010-05-22 00:06:45
a Parallel reference of programming languages 2009-09-10 12:48:23
a tutorial explaining how to develop a simple login using PHP and MySQL 2009-09-05 18:26:47
An article looking at adding some kind of event driven model to PHP 5 2008-07-28 12:48:09
It is very simple creating your own rss reader, the following article looks at a few methods of doing this. 2008-06-23 13:18:25
A quick reference about working with dropdown boxes (select element) in javascript. 2007-02-17 16:36:41
Collection of funny programming articles 2006-10-08 14:23:43