I’ve been working with sending out a HTML-formatted e-mail using a web server, and so far it’s been good (content and all displays nicely), except for word wrapping. A single line of text (user input) can go on and on and produces a horizontal scrollbar on popular e-mail web clients.
So I went to do some research. I implemented <div style="width: 100%; word-break: break-word;"><!-- Content here --></div> and it worked perfectly fine, with the exception that it began cutting up my words. What I’d like to do is to make them go to the next line, while retaining the word wrap.
Other online sources say that the <div> tag does do automatic word wrapping, but in the web clients it doesn’t work this way. I’m guessing this might be due to some of the behind-the-scenes CSS, but I didn’t really go and investigate.
Does anybody have any solution/suggestion to my problem? I wouldn’t like to do server-side formatting; firstly I think it’s a pain in the ass, and secondly I think it’d look different across different web e-mail clients… thanks!
Try adding this additional property:
See this reference for explanation of possible values: http://www.w3schools.com/cssref/pr_text_white-space.asp