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.
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>
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
I know this question has been answered but here is an alternative way this can be approached.
Note: I have added to your code to show an example of before an after.
Here is a fiddle of the same code if you need it.
<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>
Cheers
{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://i.stack.imgur.com/tiaHM.png', '推荐 贪生不怕死 的文章《Line break in html table》','https://www.manongdao.com/article-1319131.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}