Force PHP TD content to wrap?

HTML & CSS
1

I have notification emails for a form that I am having trouble getting column 2 in a 2 column layout to get the content to wrap - instead of expanding to fit. The TD in question contains a file path, which is usually quote long, so it forces expansion and throwing off the 50% width allocated for each column. (see screen shot) Is it something incorrect in the php code here?:

<?php echo '<center>
<table border="0" cellpadding="3" cellspacing="3" class="ui table" style="max-width:600px;font-family:Helvetica;table-layout: fixed;">
    <tr>
        <td colspan="2" style="padding:20px;"><center><a href="http://www.mysite.com"><img src="http://www.mysite.com/images/abc-icon.png" alt="" /></a></td>
    </tr>
    <th colspan="2" style="background:#0062a5;color:#ffffff;padding:5px;" >The following information contains the information you submitted.</th>'
?>
<?php foreach ($MAILDATA as $DATA): ?>
<?php echo'<tr>'?>
<?php echo'<td width="300px" style="width: 300px;"  align="right"><b>'?>
<?php echo $DATA[_FF_DATA_TITLE]?><?php echo'</b></td>'?>: <?php echo'<td width="300px" style="width: 300px;"  align="left" style="overflow: hidden;">'?><?php echo $DATA[_FF_DATA_VALUE]?><?php echo'</td>'?><?php echo'</tr>'?>

<?php echo $NL ?>
<?php endforeach; ?>
<?php echo '</table>
</center>'
?>

Any thoughts appreciated.

831×501 35.5 KB

2

I’m thinking this is more an html/css problem rather than php.
Can you show the resulting html code?

Any long piece of text with no whitespace won’t wrap by default, you need to change that with css.

Edit
Moved to html & css.
Aside: I notice you tagged this topic with “html5”, but center tags and those table attributes don’t belong in html5.
How about moving all that clutter to the css?

3

Thanks for the reply. Yeah it is more HTML and not HTML5 - this is for email notifications so I am not using CSS per se - more inline stuff. The resulting HTML is as such:

<center>
<table border="0" cellpadding="3" cellspacing="3" class="ui table" style="max-width:600px;font-family:Helvetica;table-layout: fixed;">
    <tr>
        <td colspan="2" style="padding:20px;"><center><a href="XXXXXXXXXXXX"><img src="XXXXXXXXXXXX" alt="XXXXXXXXXXXX" /></a></td>
    </tr>
    <th colspan="2" style="background:#0062a5;color:#ffffff;padding:5px;" >The following information was just submitted/</th><tr><td width="300px" style="width: 300px;"  align="right"><b>Product Name</b></td>: <td width="300px" style="width: 300px;"   align="left" style="overflow: hidden;">XXXXXXXXXXXXr</td></tr>

<tr><td width="300px" style="width: 300px;"  align="right"><b>Name</b></td>: <td width="300px" style="width: 300px;"   align="left" style="overflow: hidden;">XXXXXXXXXXXX</td></tr>

<tr><td width="300px" style="width: 300px;"  align="right"><b>Company</b></td>: <td width="300px" style="width: 300px;"   align="left" style="overflow: hidden;">XXXXXXXXXXXX</td></tr>

<tr><td width="300px" style="width: 300px;"  align="right"><b>City</b></td>: <td width="300px" style="width: 300px;"   align="left" style="overflow: hidden;">XXXXXXXXXXXX</td></tr>

<tr><td width="300px" style="width: 300px;"  align="right"><b>State</b></td>: <td width="300px" style="width: 300px;"   align="left" style="overflow: hidden;">XXXXXXXXXXXX</td></tr>

<tr><td width="300px" style="width: 300px;"  align="right"><b>Phone</b></td>: <td width="300px" style="width: 300px;"   align="left" style="overflow: hidden;">XXXXXXXXXXXX</td></tr>

<tr><td width="300px" style="width: 300px;"  align="right"><b>Email</b></td>: <td width="300px" style="width: 300px;"   align="left" style="overflow: hidden;">XXXXXXXXXXXX/td></tr>

<tr><td width="300px" style="width: 300px;"  align="right"><b>Send email copy of RFQ?</b></td>: <td width="300px" style="width: 300px;"   align="left" style="overflow: hidden;">checked</td></tr>

<tr><td width="300px" style="width: 300px;"  align="right"><b>When do you expect a buying decision?</b></td>: <td width="300px" style="width: 300px;"   align="left" style="overflow: hidden;">n</td></tr>

<tr><td width="300px" style="width: 300px;"  align="right"><b>What is your required delivery?</b></td>: <td width="300px" style="width: 300px;"   align="left" style="overflow: hidden;">n</td></tr>

<tr><td width="300px" style="width: 300px;"  align="right"><b>What is your current palletizing method?</b></td>: <td width="300px" style="width: 300px;"   align="left" style="overflow: hidden;">n</td></tr>

<tr><td width="300px" style="width: 300px;"  align="right"><b>Hours per shift</b></td>: <td width="300px" style="width: 300px;"   align="left" style="overflow: hidden;">n</td></tr>

<tr><td width="300px" style="width: 300px;"  align="right"><b>Shifts per day</b></td>: <td width="300px" style="width: 300px;"   align="left" style="overflow: hidden;">n</td></tr>

<tr><td width="300px" style="width: 300px;"  align="right"><b>Days per week</b></td>: <td width="300px" style="width: 300px;"   align="left" style="overflow: hidden;">n</td></tr>

<tr><td width="300px" style="width: 300px;"  align="right"><b>Are plant layouts available on CAD disk?</b></td>: <td width="300px" style="width: 300px;"   align="left" style="overflow: hidden;">Yes</td></tr>

<tr><td width="300px" style="width: 300px;"  align="right"><b>Click to upload CAD file</b></td>: <td width="300px" style="width: 300px;"   align="left" style="overflow: hidden;">/home2/XXXXX/public_html/images/XXXXXXXXXXXX/uploads/m400.pdf</td></tr>

<tr><td width="300px" style="width: 300px;"  align="right"><b>Plant environment</b></td>: <td width="300px" style="width: 300px;"   align="left" style="overflow: hidden;">Please Choose</td></tr>

<tr><td width="300px" style="width: 300px;"  align="right"><b>Is the area climate controlled?</b></td>: <td width="300px" style="width: 300px;"   align="left" style="overflow: hidden;">Please Choose</td></tr>

<tr><td width="300px" style="width: 300px;"  align="right"><b>Is communication to plant or line network required?</b></td>: <td width="300px" style="width: 300px;"   align="left" style="overflow: hidden;">Please Choose</td></tr>

<tr><td width="300px" style="width: 300px;"  align="right"><b>ProductSpecs1</b></td>: <td width="300px" style="width: 300px;"   align="left" style="overflow: hidden;">Product 1</td></tr>

<tr><td width="300px" style="width: 300px;"  align="right"><b>ProductSpecs2</b></td>: <td width="300px" style="width: 300px;"   align="left" style="overflow: hidden;">Product 2</td></tr>

<tr><td width="300px" style="width: 300px;"  align="right"><b>ProductSpecs3</b></td>: <td width="300px" style="width: 300px;"   align="left" style="overflow: hidden;">Product 3</td></tr>

<tr><td width="300px" style="width: 300px;"  align="right"><b>ProductSpecs4</b></td>: <td width="300px" style="width: 300px;"   align="left" style="overflow: hidden;">Product 4</td></tr>

<tr><td width="300px" style="width: 300px;"  align="right"><b>ProductSpecs5</b></td>: <td width="300px" style="width: 300px;"   align="left" style="overflow: hidden;">Product 5</td></tr>

<tr><td width="300px" style="width: 300px;"  align="right"><b>ProductSpecs6</b></td>: <td width="300px" style="width: 300px;"   align="left" style="overflow: hidden;">Product 6</td></tr>

<tr><td width="300px" style="width: 300px;"  align="right"><b>Other options (please specify)</b></td>: <td width="300px" style="width: 300px;"   align="left" style="overflow: hidden;">test 2-1-18</td></tr>

<tr><td width="300px" style="width: 300px;"  align="right"><b>Is an XXXXX Team Member Completing This Form?</b></td>: <td width="300px" style="width: 300px;"   align="left" style="overflow: hidden;">Yes</td></tr>

<tr><td width="300px" style="width: 300px;"  align="right"><b>RFQ completed by</b></td>: <td width="300px" style="width: 300px;"   align="left" style="overflow: hidden;">Vicky</td></tr>

<tr><td width="300px" style="width: 300px;"  align="right"><b>Salesperson Email</b></td>: <td width="300px" style="width: 300px;"   align="left" style="overflow: hidden;">vXXXXXXXXXX@yahoo.com</td></tr>

</table>
</center><center>
<table border="0" cellpadding="3" cellspacing="3" class="ui table" style="max-width:600px;font-family:Helvetica;">
    <tr>
        <td colspan="2" style="padding:10px;"><center></td>
    </tr>
</table>
</center>
4

I was thinking of adding a “spacer” - transparent gif in the first column and set the with in pixels?

5

OK I understand that.
There are css propertied for controlling line breaks and hyphenation. I don’t recall them off the top of my head and will need to look up because I only use them very rarely.

Try white-space

word-break

or Hyphens
https://css-tricks.com/almanac/properties/h/hyphenate/

6

Thanks, will have a closer look at those links.

7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.