css - 如何在 HTML 中强制断字？

Question

我有以下代码。

<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. 为什么 url 没有分成多行？
2. 有没有一种方法可以在不修改 URL 的情况下强制将其分成多行？

Answer 1

使用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>