Search code examples
csshtml-tablehtml-emailline-breaks

Line break in html table

I have a fiddle which I have replicated from a particular design.

The section of the screenshot I have attached below in the problem statement.

Problem Statement:

I am wondering what changes I should make in the fiddle so that I am able to give the line break between the following lines as shown in the screenshot which is the present in the fiddle as well.

enter image description here

The snippets of HTML codes which I have used in the fiddle for the above lines are:

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

  • Here is what I have done:

    Add line-break class to the specified <td>

    You can use word-wrap: break-word; to multiline text in a div. word-wrap works based on the width of the div.

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

    Here's JSFiddle