Word-wrap: break-word not working in IE9

Question

I have a privacy field (values are To: or Bcc:) and an email address field that are outputted from my database. I want the email address to always be after the To: / Bcc: and not moved a line down when the email address is too long.

The button is position: absolute so it shouldn't be affecting the text position.

The longest email address on my database (so far) is 41 characters long.

I've used this method to break the email address when it reaches the end of the cell, with the remaining part of the email address continued on the next line down:

<tr>
<td>Email:</td>
<td style="word-wrap: break-word"><?php echo $Privacy; ?> <span><?php echo $Email; ?></span> <button class="copy">COPY</button></td>
</tr>

... this doesn't work in IE9. I need to have at least five characters for the privacy field (Bcc: ) and then 36 characters after that before wrapping needs to take place.

Am I using the CSS for something other than it's purpose? Text-wrap doesn't appear to be supported anymore. Is JavaScript or PHP needed to address this?

thank you

Answer 1

In browsers other than Internet Explorer — and maybe in IE9 — it's overflow-wrap .

<td style="overflow-wrap: break-word">

You could try both styles. edit Try -ms-word-wrap for IE9.

Answer 2

Try giving the td a fixed width and then putting the contents inside a div with the styling applied. Ex:

<td style="width:300px;">
    <div style="width:300px;overflow-wrap:break-word;">
        <?php echo $Privacy; ?> 
        <span><?php echo $Email; ?></span> 
        <button class="copy">COPY</button>
    </div>
</td>

Answer 3

I put my label in a div and give it style it works finnally

<div style="word-wrap: normal; word-break: break-all;">
<asp:Label ID="Label2" runat="server" Text='<%# Bind("REASON") %>'></asp:Label>
</div>