代码之家  ›  专栏  ›  技术社区  ›  flash

HTML表中的换行符

  •  0
  • flash  · 技术社区  · 6 年前

    我有一个 fiddle 我从特定设计中复制了它。

    我在下面的问题陈述中附加的屏幕截图部分。

    问题陈述:

    我想知道我应该在小提琴上做些什么改变,这样我就可以在屏幕截图中所示的下面几行之间进行 换行,这也是小提琴中存在的

    我在上面几行中使用的HTML代码片段是:

    <tr>
    <td style=“padding bottom:3%;text-align:right;”>时间:</td>
    <td style=“padding bottom:3%;padding left:10%;”>3月28日/18@7:00pm至3月30日/18@7:00pm</td>
    </tr>
    
    
    

    我在下面的问题陈述中附加的屏幕截图部分。

    问题陈述:

    我想知道我应该在小提琴上做些什么改变,这样我才能屏幕截图中显示的下列行之间的换行符哪个是在小提琴中出现也。

    enter image description here

    我在上面几行中使用的HTML代码片段是:

      <tr>
        <td style="padding-bottom: 3%;text-align:right;">when:</td>
        <td style="padding-bottom: 3%;padding-left: 10%;">March 28/18 @ 7:00pm to March 30/18 @ 7:00pm</td>
      </tr>
    
    2 回复  |  直到 6 年前
        1
  •  1
  •   Alex    6 年前

    以下是我所做的:

    添加 line-break 类到指定的 <td>

    你可以用 word-wrap: break-word; 在一个分区中多行文本。 word-wrap 基于 width 部门的

    .line-break {
      word-wrap: break-word;
      width: 300px;
    }
    <html>
    <body>
    
    
    <p style="font-size:20px;margin-left:22%;color:#55BEC7;"> hi XYZ, </p>
    
    <table style="width:100%;display: flex;
      justify-content: center;">
      
     <tbody style="font-size:20px;padding-left: 15%;"> 
      <tr>
        <td style="padding-bottom: 3%;text-align:right;">type:</td>
    	<td style="padding-bottom: 3%;padding-left: 10%;">availability check request</td>
      </tr>
      <tr>
        <td style="padding-bottom: 3%;text-align:right;">estimated total:</td>
        <td style="padding-bottom: 3%;padding-left: 10%;">$250.00</td>
      </tr>
      <tr>
        <td style="padding-bottom: 3%;text-align:right;">what</td>
        <td style="padding-bottom: 3%;padding-left: 10%;">chainsaw</td>
      </tr>
      <tr>
        <td style="padding-bottom: 3%;text-align:right;">how many</td>
        <td style="padding-bottom: 3%;padding-left: 10%;">2</td>
      </tr>
      <tr>
        <td style="padding-bottom: 3%;text-align:right;">when:</td>
        <td style="padding-bottom: 3%;padding-left: 10%;" class="line-break">March 28/18 @ 7:00pm to March 30/18 @ 7:00pm</td>
      </tr>
      <tr>
        <td style="padding-bottom: 3%;text-align:right;">who:</td>
        <td style="padding-bottom: 3%;padding-left: 10%;color:#FF8D58;">John s</td>
      </tr>
      </tbody>
    </table>
    
    
    
    <h2 style="text-align:center;color:#484848;margin-top:2.5%;margin-bottom:5%;">steps to earn your money:</h2>
    <div class="steps" style="text-align: left;
        margin-left: auto;
        width: 50%;
        padding-right: 0%;
        margin-right: auto;color:#484848;font-size:20px;">
    <p>1. click here to open the ABC app to the posting requests page </p>
    <p>2. click on availability check request</p>
    <p>3. say yes, its availabile ot suggest another date it is</p>
    <p>4. wait the 1 or 24 hour confirmation good</p>
    <p>5. three days after the booking ends money will be send to your account</p>
    </div>
    </body>
    </html>

    这里是 JSFiddle

        2
  •  1
  •   Syfer Khauri    6 年前

    我知道这个问题已经被回答了,但这里有一个替代方法可以解决这个问题。

    注意:我已经添加到您的代码中,以显示“前后”的示例。

    这是一个 fiddle 如果你需要同样的代码。

    <html>
    <body>
    
    
    <p style="font-size:20px;margin-left:22%;color:#55BEC7;"> hi XYZ, </p>
    
    <!-- new way -->
    <table style="width:100%;">
     <tbody> 
      <tr>
        <td>
            <table style="width:100%;">
             <tbody> 
              <tr>
               <td width="50%" align="right" style="font-family:Arial; font-size:12px;color:#000000;;padding:0px 20px;">type </td>
               <td width="50%" style="font-family:Arial; font-size:12px;color:#000000;text-align:left;padding:0px 10px;">availability check request</td>
    	        </tr>
               
              <tr>
               <td width="50%" align="right" style="font-family:Arial; font-size:12px;color:#000000;;padding:0px 20px;">type </td>
               <td width="50%" style="font-family:Arial; font-size:12px;color:#000000;text-align:left;padding:0px 10px;">availability check request</td>
    	        </tr>
               
              <tr>
               <td width="50%" align="right" style="font-family:Arial; font-size:12px;color:#000000;;padding:0px 20px;">type </td>
               <td width="50%" style="font-family:Arial; font-size:12px;color:#000000;text-align:left;padding:0px 10px;">availability check request</td>
    	        </tr>
             </tbody>
            </table>
        </td>
    	  </tr>
      </tbody>
    </table>
    <!-- new way -->
    
    <table style="width:100%;display: flex;
      justify-content: center;">
      
     <tbody style="font-size:20px;padding-left: 15%;"> 
      <tr>
        <td style="padding-bottom: 3%;text-align:right;">type:</td>
    	<td style="padding-bottom: 3%;padding-left: 10%;">availability check request</td>
      </tr>
      <tr>
        <td style="padding-bottom: 3%;text-align:right;">estimated total:</td>
        <td style="padding-bottom: 3%;padding-left: 10%;">$250.00</td>
      </tr>
      <tr>
        <td style="padding-bottom: 3%;text-align:right;">what</td>
        <td style="padding-bottom: 3%;padding-left: 10%;">chainsaw</td>
      </tr>
      <tr>
        <td style="padding-bottom: 3%;text-align:right;">how many</td>
        <td style="padding-bottom: 3%;padding-left: 10%;">2</td>
      </tr>
      <tr>
        <td style="padding-bottom: 3%;text-align:right;">when:</td>
        <td style="padding-bottom: 3%;padding-left: 10%;word-wrap: break-word;
        width: 300px;" >March 28/18 @ 7:00pm to March 30/18 @ 7:00pm</td>
      </tr>
      <tr>
        <td style="padding-bottom: 3%;text-align:right;">who:</td>
        <td style="padding-bottom: 3%;padding-left: 10%;color:#FF8D58;">John s</td>
      </tr>
      </tbody>
    </table>
    
    
    
    <h2 style="text-align:center;color:#484848;margin-top:2.5%;margin-bottom:5%;">steps to earn your money:</h2>
    <div class="steps" style="text-align: left;
        margin-left: auto;
        width: 50%;
        padding-right: 0%;
        margin-right: auto;color:#484848;font-size:20px;">
    <p>1. click here to open the ABC app to the posting requests page </p>
    <p>2. click on availability check request</p>
    <p>3. say yes, its availabile ot suggest another date it is</p>
    <p>4. wait the 1 or 24 hour confirmation good</p>
    <p>5. three days after the booking ends money will be send to your account</p>
    </div>
    </body>
    </html>

    干杯