如何在HTML中强制使用wordbreak？

时间：2018-06-14 04:54:49

标签： html css html5

我有以下代码。 

<tr>
                        <td align="left" style="padding-top: 10px;" bgcolor="#fffff">
                            <table cellspacing="0" cellpadding="0" border="0" width="100%">
                                <tr>
                                    <td width="40%" align="left" bgcolor="#c8f4ca" style="font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 800; line-height: 24px; padding: 10px;">
                                        Attraction Name:
                                    </td>
                                    <td width="60%" align="right" bgcolor="#eeeeee" style="font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 800; line-height: 24px; padding: 10px;">
                                        Arlington Hotel Celtic Night
                                    </td>
                                </tr>
                            </table>
                            <table cellspacing="0" cellpadding="0" border="0" width="25%" align="right" style="max-width: 25%;">
                                <tr>
                                    <td width="25%" align="left" bgcolor="#eeeeee" style="font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: 24px; padding: 15px 10px 5px 10px;">
                                       Email:
                                    </td>
                                    <td width="75%" align="left" bgcolor="#eeeeee" style="font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: 24px; padding: 15px 10px 5px 10px;">
                                        info@celticnights.com
                                    </td>
                                </tr>
                                <tr>
                                    <td width="25%" align="left" bgcolor="#eeeeee" style="font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: 24px; padding: 15px 10px 5px 10px;">
                                       Website:
                                    </td>
                                    <td width="75%" align="left" bgcolor="#eeeeee" style="font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: 24px; padding: 15px 10px 5px 10px;">
                                        http://celticnights.com
                                    </td>
                                </tr>
                                <tr>
                                    <td width="25%" align="left" bgcolor="#eeeeee" style="font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: 24px; padding: 15px 10px 20px 10px;">
                                       Reservation:
                                    </td>
                                    <td width="75%" align="left" bgcolor="#eeeeee" style="font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: 24px; padding: 15px 10px 20px 10px;">
                                        Required
                                    </td>
                                </tr>
                                
                            </table>
                        </td>
                    </tr><tr>
                        <td align="left" style="padding-top: 10px;" bgcolor="#fffff">
                            <table cellspacing="0" cellpadding="0" border="0" width="100%">
                                <tr>
                                    <td width="40%" align="left" bgcolor="#c8f4ca" style="font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 800; line-height: 24px; padding: 10px;">
                                        Attraction Name:
                                    </td>
                                    <td width="60%" align="right" bgcolor="#eeeeee" style="font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 800; line-height: 24px; padding: 10px;">
                                        Ashtown Castle
                                    </td>
                                </tr>
                            </table>
                            <table cellspacing="0" cellpadding="0" border="0" width="25%" align="right" style="max-width: 25%;">
                                <tr>
                                    <td width="25%" align="left" bgcolor="#eeeeee" style="font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: 24px; padding: 15px 10px 5px 10px;">
                                       Email:
                                    </td>
                                    <td width="75%" align="left" bgcolor="#eeeeee" style="font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: 24px; padding: 15px 10px 5px 10px;">
                                        phoenixparkvisitorcentre@opw.ie
                                    </td>
                                </tr>
                                <tr>
                                    <td width="25%" align="left" bgcolor="#eeeeee" style="font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: 24px; padding: 15px 10px 5px 10px;">
                                       Website:
                                    </td>
                                    <td width="75%" align="left" bgcolor="#eeeeee" style="font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: 24px; padding: 15px 10px 5px 10px; word-wrap: break-word;">
                                        http://www.heritageireland.ie/en/dublin/phoenixparkvisitorcentre-ashtowncastle/
                                    </td>
                                </tr>
                                <tr>
                                    <td width="25%" align="left" bgcolor="#eeeeee" style="font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: 24px; padding: 15px 10px 20px 10px;">
                                       Reservation:
                                    </td>
                                    <td width="75%" align="left" bgcolor="#eeeeee" style="font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: 24px; padding: 15px 10px 20px 10px;">
                                        Not Required
                                    </td>
                                </tr>
                                
                            </table>
                        </td>
                    </tr>

问题是第二个景点细节似乎没有遵循最大宽度。我知道这是因为网站网址很长。

我有几个与此有关的问题：

  1. 为什么网址不会分成多行？
  2. 有没有办法可以在不修改网址的情况下将其强行插入多行？

1 个答案:

答案 0 :(得分：4)

使用css规则word-break: break-all; 

table tr td:nth-child(2) {
  word-break: break-all;
}
<table>
<tr>
   <td align="left" style="padding-top: 10px;" bgcolor="#fffff">
      <table cellspacing="0" cellpadding="0" border="0" width="100%">
         <tr>
            <td width="40%" align="left" bgcolor="#c8f4ca" style="font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 800; line-height: 24px; padding: 10px;">
               Attraction Name:
            </td>
            <td width="60%" align="right" bgcolor="#eeeeee" style="font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 800; line-height: 24px; padding: 10px;">
               Arlington Hotel Celtic Night
            </td>
         </tr>
      </table>
      <table cellspacing="0" cellpadding="0" border="0" width="25%" align="right" style="max-width: 25%;">
         <tr>
            <td width="25%" align="left" bgcolor="#eeeeee" style="font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: 24px; padding: 15px 10px 5px 10px;">
               Email:
            </td>
            <td width="75%" align="left" bgcolor="#eeeeee" style="font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: 24px; padding: 15px 10px 5px 10px;">
               info@celticnights.com
            </td>
         </tr>
         <tr>
            <td width="25%" align="left" bgcolor="#eeeeee" style="font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: 24px; padding: 15px 10px 5px 10px;">
               Website:
            </td>
            <td width="75%" align="left" bgcolor="#eeeeee" style="font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: 24px; padding: 15px 10px 5px 10px;">
               http://celticnights.com
            </td>
         </tr>
         <tr>
            <td width="25%" align="left" bgcolor="#eeeeee" style="font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: 24px; padding: 15px 10px 20px 10px;">
               Reservation:
            </td>
            <td width="75%" align="left" bgcolor="#eeeeee" style="font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: 24px; padding: 15px 10px 20px 10px;">
               Required
            </td>
         </tr>
      </table>
   </td>
</tr>
<tr>
   <td align="left" style="padding-top: 10px;" bgcolor="#fffff">
      <table cellspacing="0" cellpadding="0" border="0" width="100%">
         <tr>
            <td width="40%" align="left" bgcolor="#c8f4ca" style="font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 800; line-height: 24px; padding: 10px;">
               Attraction Name:
            </td>
            <td width="60%" align="right" bgcolor="#eeeeee" style="font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 800; line-height: 24px; padding: 10px;">
               Ashtown Castle
            </td>
         </tr>
      </table>
      <table cellspacing="0" cellpadding="0" border="0" width="25%" align="right" style="max-width: 25%;">
         <tr>
            <td width="25%" align="left" bgcolor="#eeeeee" style="font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: 24px; padding: 15px 10px 5px 10px;">
               Email:
            </td>
            <td width="75%" align="left" bgcolor="#eeeeee" style="font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: 24px; padding: 15px 10px 5px 10px;">
               phoenixparkvisitorcentre@opw.ie
            </td>
         </tr>
         <tr>
            <td width="25%" align="left" bgcolor="#eeeeee" style="font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: 24px; padding: 15px 10px 5px 10px;">
               Website:
            </td>
            <td width="75%" align="left" bgcolor="#eeeeee" style="font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: 24px; padding: 15px 10px 5px 10px; word-wrap: break-word;">
               http://www.heritageireland.ie/en/dublin/phoenixparkvisitorcentre-ashtowncastle/
            </td>
         </tr>
         <tr>
            <td width="25%" align="left" bgcolor="#eeeeee" style="font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: 24px; padding: 15px 10px 20px 10px;">
               Reservation:
            </td>
            <td width="75%" align="left" bgcolor="#eeeeee" style="font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: 24px; padding: 15px 10px 20px 10px;">
               Not Required
            </td>
         </tr>
      </table>

相关问题
最新问题