表：新行中的额外文本

Question

我有一张图片。

现在，我的疑问是，我希望图像下方的文本换行如果文本太长。当我输入长文本时，单元格（td）会被放大，这是我不想放大的。

所以我希望额外的文本在新行中。它应该限制为图像的宽度，之后额外的文本应该在新行中。

我不能使用 div 和 position 属性。我只能使用 table 标签。

图像高度应该相同。我曾尝试使用 word-wrap 、white-space，但图像高度会因此而有所不同。

<table bgcolor="black" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt; border: thin white solid; " align="left" border="0" cellpadding="0" cellspacing="0"  >
                                                <tbody>

                                                <td align="center">
                                                    <table  style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;" align="center" border="0" cellpadding="0" cellspacing="0" width="120">
                                                        <tbody><tr>
                                                            <td align="center" height="100" valign="top" width="100">
                                                                <p style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;"><a class="modimg" style="text-decoration: none!important;" href="#"><img style=" border: 3px solid #ffcbbc ; outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;" alt="" src="http://www.hubilo.com/eventApp/ws//images/speaker/profile/thumb/2712_1455301580.jpeg" border="0" height="110" width="110" ></a></p>
                                                            </td>
                                                        </tr>
                                                        </tbody></table>
                                                </td>


                                                <tr>
                                                    <td class="h2" style=" font-weight: bold ;font-family: 'proxima_nova_rgregular', Arial, helvetica, sans-serif;font-size: 10px;padding-top: 2px;padding-bottom: 0px;color:#ffffff;">
                                                       <p style="padding:0; margin:0;text-align: center;"> <span class="wrap_textbox">dsdsfsdfsdsfsdsdgsgdsdfsdfd</span></p>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="h2" style="font-family: 'proxima_nova_rgregular', Arial, helvetica, sans-serif;font-size: 8px;text-align: center;color: #ffffff;">
                                                        <span class="wrap_textbox">Co-Founder at SeeFund</span>
                                                    </td>
                                                </tr>

                                                </tbody>

                                            </table>


                                            <!--Speaker 2-->

                                            <table  style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt; margin: 0 auto; margin-left: 15px;  " align="left" border="0" cellpadding="0" cellspacing="0" >
                                                <tbody>
                                                <tr>
                                                    <td align="center">
                                                        <table style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;" align="center" border="0" cellpadding="0" cellspacing="0" width="120">
                                                            <tbody><tr>
                                                                <td align="center" height="100" valign="top" width="100">
                                                                    <p style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;"><a class="modimg" style="text-decoration: none!important;" href="#"><img style=" border: 3px solid #ffcbbc ; outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;" alt="" src="http://www.hubilo.com/eventApp/ws//images/speaker/profile/thumb/2712_1455949782.jpeg" border="0" height="110" width="110" ></a></p>
                                                                </td>
                                                            </tr>
                                                            </tbody></table>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="h2" style=" font-weight: bold ;font-family: 'proxima_nova_rgregular', Arial, helvetica, sans-serif;font-size: 10px;padding-top: 5px;padding-bottom: 0px;text-align: center;color:#ffffff; ">
                                                        <span class="wrap_textbox">Mr. R Chandrasekhar</span>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="h2" style="font-family: 'proxima_nova_rgregular', Arial, helvetica, sans-serif;font-size: 8px;text-align: center;color: #ffffff;">
                                                        <span class="wrap_textbox">President of NASSCOM</span>
                                                    </td>
                                                </tr>
                                                </tbody>
                                            </table>



                                            <!--Speaker 3 -->

                                            <table  style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt; margin: 0 auto;  margin-left: 15px;  " align="left" border="0" cellpadding="0" cellspacing="0" >
                                                <tbody>
                                                <tr>
                                                    <td align="center">
                                                        <table style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;" align="center" border="0" cellpadding="0" cellspacing="0" width="120">
                                                            <tbody><tr>
                                                                <td align="center" height="100" valign="top" width="100">
                                                                    <p style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;"><a class="modimg" style="text-decoration: none!important;" href="#"><img style=" border: 3px solid #ffcbbc ; outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;" alt="" src="http://www.hubilo.com/eventApp/ws//images/speaker/profile/thumb/2712_1455627060.jpeg" border="0" height="110" width="110" ></a></p>
                                                                </td>
                                                            </tr>
                                                            </tbody></table>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="h2" style=" font-weight: bold ;font-family: 'proxima_nova_rgregular', Arial, helvetica, sans-serif;font-size: 10px;padding-top: 5px;padding-bottom: 0px;text-align: center;color:#ffffff;">
                                                        <span class="wrap_textbox">Mr. Jay Panda</span>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="h2" style="font-family: 'proxima_nova_rgregular', Arial, helvetica, sans-serif;font-size: 8px;text-align: center;color: #ffffff;">
                                                        <span class="wrap_textbox">Member of Parliament</span>
                                                    </td>
                                                </tr>
                                                </tbody>
                                            </table>


                                            <!--Speaker 4 -->


                                            <table  style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt; margin: 0 auto;  margin-left: 15px;  " align="left" border="0" cellpadding="0" cellspacing="0" >
                                                <tbody>
                                                <tr>
                                                    <td align="center">
                                                        <table style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;" align="center" border="0" cellpadding="0" cellspacing="0" width="120">
                                                            <tbody><tr>
                                                                <td align="center" height="100" valign="top" width="100">
                                                                    <p style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;"><a class="modimg" style="text-decoration: none!important;" href="#"><img style="border: 3px solid #ffcbbc; outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;" alt="" src="http://www.hubilo.com/eventApp/ws//images/speaker/profile/thumb/2712_1455300140.jpeg" border="0" height="110" width="110" ></a></p>
                                                                </td>
                                                            </tr>
                                                            </tbody></table>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="h2" style=" font-weight: bold ;font-family: 'proxima_nova_rgregular', Arial, helvetica, sans-serif;font-size: 10px;padding-top: 5px;padding-bottom: 0px;text-align: center;color:#ffffff;">
                                                        <span class="wrap_textbox">Ms. Shazia Ilmi</span>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="h2" style="font-family: 'proxima_nova_rgregular', Arial, helvetica, sans-serif;font-size: 8px;text-align: center;color: #ffffff;">
                                                        <span class="wrap_textbox">Spokesperson at BJP</span>
                                                    </td>
                                               </tr>
                                    </table>

Answer 1

所以这就是我所做的......

<table bgcolor="black" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt; border: thin white solid; " align="left" border="0" cellpadding="0" cellspacing="0"  >
    <tbody>

    <td align="center">
        <table  style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;" align="center" border="0" cellpadding="0" cellspacing="0" width="120">
            <tbody><tr>
                <td align="center" height="100" valign="top" width="100">
                    <p style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;"><a class="modimg" style="text-decoration: none!important;" href="#"><img style=" border: 3px solid #ffcbbc ; outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;" alt="" src="http://www.hubilo.com/eventApp/ws//images/speaker/profile/thumb/2712_1455301580.jpeg" border="0" height="110" width="110" ></a></p>
                </td>
            </tr>
            </tbody></table>
    </td>


    <tr>
        <td class="h2" style=" font-weight: bold ;font-family: 'proxima_nova_rgregular', Arial, helvetica, sans-serif;font-size: 10px;padding-top: 2px;padding-bottom: 0px;color:#ffffff;">
            <p style="padding:0; margin:0;text-align: center; max-width:116px;"> <span class="wrap_textbox">Lorem ipsum dolor sit amet, consectetur adipisicing elit. A consequuntur corporis, debitis dignissimos error fuga id inventore laudantium officiis quae quam, quia quos, repudiandae saepe sed sint tenetur? Doloribus, recusandae?</span></p>
        </td>
    </tr>
    <tr>
        <td class="h2" style="font-family: 'proxima_nova_rgregular', Arial, helvetica, sans-serif;font-size: 8px;text-align: center;color: #ffffff;">
            <span class="wrap_textbox">Co-Founder at SeeFund</span>
        </td>
    </tr>

    </tbody>

</table>

只需添加：max-width:116px;（或任何您喜欢的最大宽度），然后它会自动为您移动到新行。

更新

这是我添加样式的行：

       <p style="padding:0; margin:0;text-align: center; max-width:116px;">

我强烈建议将它们放入 CSS 类中，然后放入样式表中，因为如果您以后希望调整代码，则必须进入每个文件并调整每个标签下的 style="" 标签已添加到。