logo标签列表

如何在HTML中强制换行？

csshtml
3
我有以下代码。 

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

问题在于第二个吸引力详情似乎没有遵循最大宽度。我知道这是由于长网站URL导致的。
我有几个相关问题：
  1. 为什么URL不能分成多行？
  2. 是否有一种方法可以强制将其分成多行而不修改URL？
链接已经分成两行。 - Shahil M
@ShahilM 是的，但是你可以看到灰色区域的宽度大于第一部分吸引力。有没有办法保留宽度？ - Riz-waan
1
表格 { 表格布局: 固定; 单词换行: 打破全部 } - Shahil M
1个回答
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>

你的回答是有效的，但我想知道为什么你建议使用单独的CSS代码。我不能只用word-break: break-all;替换word-wrap: break-word;吗？ - Riz-waan
与自动换行不同，单词断裂（word-break）会在文本溢出容器的确切位置创建一个断点（即使将整个单词放在自己的行上也可以避免出现断点）。 - xxxmatko
是的，那很有道理。但我想知道为什么你把它包含在一个单独的CSS部分中？这样做是否有任何价值或纯粹只是个人喜好？ - Riz-waan
1
表格 { 表格布局: 固定; 单词换行: 打破全部 } - Shahil M
2
嗯，这不是个人喜好问题。但你应该将 CSS 代码与 HTML 代码分开写，这样会更干净、更易于维护。在你发布的 HTML 代码中，你用了很多重复的样式。此外，不要使用像“bgcolor”这样的 HTML 格式，而应使用 CSS。 - xxxmatko
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接