We help IT Professionals succeed at work.

Wrap text in html email

vetted
vetted asked
on
Medium Priority
2,141 Views
Last Modified: 2012-05-06
I need to set a fixed width or wrap the text in an html email so that it doesn't keep stretching across the page when a large amount of text is entered into a textarea.
Comment
Watch Question

Commented:
<div style="width:800px;">
<p> YOUR TEXT HERE </p>
</div>

The above markup would wrap the paragraph at 800px long. You can change that number to what suits.

Author

Commented:
That didn't work for me.  The field value is inside of a table. Here's my code with what you gave me.

<tr><td><div style="width:300px;"><p>ff<conviction></p></div></td></tr>

Commented:
Divs are used instead of a table layout. if you are using tables then just set the width on the td.
<tr>
<td style="width:800px;">
TEXT
</td>
</tr>

Author

Commented:
This is still not working.  Am I missing something else?

<table width="600" border="0" align="center" cellspacing="0" bgcolor="C4B584" style="padding: 2px 0px 2px 20px;">
<tr><td style="width:300px;">ff<conviction></td></tr>
</table>

Commented:
Ah ok. You are using HTML 4.0!
the Style tag is a CSS property, I was assumung XHTML 1.0

See below document.You need content to see the wrapping, hence the lorem ipsum.
I set one TD to 400 which forces the other to 200 as the table is 600.


<html>
<head>
</head>
<body>
 
<table width="600" border="0" align="center" cellspacing="0" bgcolor="C4B584" style="padding: 2px 0px 2px 20px;">
<tr>
<td width="400">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the 
 
industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it 
 
to make a type specimen book. It has survived not only five centuries, but also the leap into electronic 
 
typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets 
 
containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including 
 
versions of Lorem Ipsum.
</td>
<td>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's 
 
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a 
 
type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, 
 
remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing 
 
Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of 
 
Lorem Ipsum.
</td>
</tr>
 
</table>
 
</body>
</html>

Open in new window

Author

Commented:
I used that code previously and it didn't work.  I don't care if I use HTML 4.0 or XHTML, I just need it to work.

For this form, if a person has a criminal record, he/she has to enter the details.  On the form, there is no problem. The text is wrapping in the text area field.  The issue is in the submission email.  That text is what is stretching the page.  The Form and HTML Email Template are below (Form code first then email).

FYI - The style="padding: 2px 20px 0px 20px;" in the HTML email template is working....if that's any consolation.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 
<title>Employment Application</title>
 
<META name="description" content="" />
<META name="keywords" content="" />
<META name="author" content="" />
<SCRIPT language="JavaScript">
var TlxPgNm='welcome';
</SCRIPT>
<link rel="stylesheet" href="emp_app.css" />
</head>
 
<!--Content Here -->
 
<body>
 
<br />
<table width="600" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="C4B584">
	
		 
<tr><td><br />
<h2>Instructions:</h2>
<p> 1) Fields marked with <span class="style5">*</span> are required.</p>
<p> 2) If answer is unknown, leave blank unless required.</p>
<p> 3) It is highly recommended to upload your Resume/CV.</p>
<p> 4) When form is completed, you must click the Submit button.  You will receive a confirmation via email.</p>
</td></tr>
 
<tr><td><img src="../images/white_divider.jpg" /><br /><br /></td></tr>
</table>
<table width="600" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="C4B584">
	<form action="emp_app_script.php" method="post" enctype="multipart/form-data">
    <tr>
<td>Position Applied For:</td><td><input name="position" type="text" value="" size="25"></td>
<td>Available Start Date:</td><td><input name="start_date" type="text" value="" size="13"></td>
</tr>
 <tr><td colspan="4"><br /><img src="../images/white_divider.jpg" /><br /></td></tr>
</table>
<table width="600" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="C4B584"> 
   <tr>
    <td width="425"><div align="left"><span class="style5">*</span>Have you ever been convicted of or charged with a felony or misdemeanor?</div></td>
    <td width="150"><input type="radio" name="conviction" value="yes" checked> Yes &nbsp; <input type="radio" name="conviction" value="no" checked> No</td>
  </tr> 
   <tr>
    <td colspan="2" align="left"><br />If yes, please explain details in full, including dates, details of offense(s) charged, jurisdiction, and disposition of case:</td></tr>
    <tr><td colspan="2" align="left"><textarea name="conviction_details" cols="69" rows="6"></textarea><br /><br /></td>
   </tr>
</table>
</body></html>
 
 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 
<title>Employment Application Submission</title>
 
<link rel="stylesheet" href="https://mysite.com/emp_app_email.css" />
 
</head>
<!--Content Here -->
<body>
 
<br />
<table width="600" border="0" align="center" cellspacing="0" bgcolor="C4B584">	
<tr><td width="407" style="padding: 0px 0px 0px 8px;"><br /><h2>Employment Application Submission</h2></td></tr>
				
<tr><td style="padding: 8px 0px 0px 20px;"><h3>Below are the details of a contractor application that has been submitted.</h3></td></tr>
<br />
</table>
 
<table width="600" border="0" align="center" cellspacing="0" bgcolor="C4B584" style="padding: 2px 0px 2px 20px;">	
<tr><td colspan="2" align="center"><img src="https://mysite.com/images/white_divider.jpg" /><br /><br /></td></tr>
 
<tr><td width="181" style="padding: 0px 0px 0px 20px;"><h4>Position Applied for::</h4></td><td width="403" style="padding: 0px 0px 0px 0px;">ff<position>
<tr><td width="181" style="padding: 0px 0px 12px 20px;"><h4>Available Start Date:</h4></td><td width="403" style="padding: 0px 0px 12px 0px;">ff<start_date></td></tr>
 
</table>
 
 
<table width="600" border="0" align="center" cellspacing="0" bgcolor="C4B584" style="padding: 2px 0px 2px 20px;">
<tr><td width="550"><h4>Have you ever been convicted of or charged with a felony or misdemeanor?</h4></td></tr>
<tr><td width="550">ff<conviction></td></tr>
<tr><td style="padding: 2px 20px 0px 20px;" width="550"><h4>If yes, please explain details in full, including dates, details of offense(s) charged, jurisdiction, and disposition of case:</h4></td></tr>
<tr><td width="550">ff<conviction_details></td></tr>
<tr><td width="550" style="padding: 2px 20px 0px 20px;"><h4>Have you, or any person or entity with whom you have been associated with, filed for bankruptcy, been decalred bankrupt or insolvent, or been the subject of any receivership proceedigns within the last 7 years?</h4></td></tr>
<tr><td width="550">ff<bankruptcy></td></tr>
<tr><td width="550" style="padding: 2px 0px 8px 20px;"><h4>If yes,please provide full details, including dates, places, amounts involved, and dispositon:</h4></td></tr>
<tr><td width="550">ff<bankruptcy_details></td></tr>
</table>
</body></html>

Open in new window

Commented:
What browser are you using? Wrapping in IE7 anf FF but having colour problems in FF.
Are you wanting this to be cross browser compliant?

I have just finished work, if you can wait I will recreate it tomorrow in XHTML with cross browser support.

Author

Commented:
It's the email that's having the problem. The results of the form are sent in an email, not in the browser.  I am using Outlook 2007.

Commented:
I opened up your email in outlook 2007 and attached screenshot of what I see.
Can you post a screenshot of what you see as the text does wrap on mine...


email.jpg

Author

Commented:
Try typing more text in the textarea and see if it wraps.  You have only typed ff in those fields.  It's the answers that are making it stretch.
Commented:
I have been reading this:
http://msdn.microsoft.com/en-us/library/aa338201.aspx

Outlook 2007 is extremely limited on how much HTML it undertands. Hate to say I am struggling to beat this one as well. All the properties you would usually use are unsupported.

Not the solution you were looking for? Getting a personalized solution is easy.

Ask the Experts

Author

Commented:
I have to close this question, it's still not fixed.  You get the points for trying. Thanks.
Access more of Experts Exchange with a free account
Thanks for using Experts Exchange.

Create a free account to continue.

Limited access with a free account allows you to:

  • View three pieces of content (articles, solutions, posts, and videos)
  • Ask the experts questions (counted toward content limit)
  • Customize your dashboard and profile

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.