Skip to content Skip to sidebar Skip to footer
Home / Css / Html Email / Html Table / Line Breaks

Line Break In Html Table

Post a Comment
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

Solution 1:

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><pstyle="font-size:20px;margin-left:22%;color:#55BEC7;"> hi XYZ, </p><tablestyle="width:100%;display: flex;
  justify-content: center;"><tbodystyle="font-size:20px;padding-left: 15%;"><tr><tdstyle="padding-bottom: 3%;text-align:right;">type:</td><tdstyle="padding-bottom: 3%;padding-left: 10%;">availability check request</td></tr><tr><tdstyle="padding-bottom: 3%;text-align:right;">estimated total:</td><tdstyle="padding-bottom: 3%;padding-left: 10%;">$250.00</td></tr><tr><tdstyle="padding-bottom: 3%;text-align:right;">what</td><tdstyle="padding-bottom: 3%;padding-left: 10%;">chainsaw</td></tr><tr><tdstyle="padding-bottom: 3%;text-align:right;">how many</td><tdstyle="padding-bottom: 3%;padding-left: 10%;">2</td></tr><tr><tdstyle="padding-bottom: 3%;text-align:right;">when:</td><tdstyle="padding-bottom: 3%;padding-left: 10%;"class="line-break">March 28/18 @ 7:00pm to March 30/18 @ 7:00pm</td></tr><tr><tdstyle="padding-bottom: 3%;text-align:right;">who:</td><tdstyle="padding-bottom: 3%;padding-left: 10%;color:#FF8D58;">John s</td></tr></tbody></table><h2style="text-align:center;color:#484848;margin-top:2.5%;margin-bottom:5%;">steps to earn your money:</h2><divclass="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

Solution 2:

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><pstyle="font-size:20px;margin-left:22%;color:#55BEC7;"> hi XYZ, </p><!-- new way --><tablestyle="width:100%;"><tbody><tr><td><tablestyle="width:100%;"><tbody><tr><tdwidth="50%"align="right"style="font-family:Arial; font-size:12px;color:#000000;;padding:0px 20px;">type </td><tdwidth="50%"style="font-family:Arial; font-size:12px;color:#000000;text-align:left;padding:0px 10px;">availability check request</td></tr><tr><tdwidth="50%"align="right"style="font-family:Arial; font-size:12px;color:#000000;;padding:0px 20px;">type </td><tdwidth="50%"style="font-family:Arial; font-size:12px;color:#000000;text-align:left;padding:0px 10px;">availability check request</td></tr><tr><tdwidth="50%"align="right"style="font-family:Arial; font-size:12px;color:#000000;;padding:0px 20px;">type </td><tdwidth="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 --><tablestyle="width:100%;display: flex;
  justify-content: center;"><tbodystyle="font-size:20px;padding-left: 15%;"><tr><tdstyle="padding-bottom: 3%;text-align:right;">type:</td><tdstyle="padding-bottom: 3%;padding-left: 10%;">availability check request</td></tr><tr><tdstyle="padding-bottom: 3%;text-align:right;">estimated total:</td><tdstyle="padding-bottom: 3%;padding-left: 10%;">$250.00</td></tr><tr><tdstyle="padding-bottom: 3%;text-align:right;">what</td><tdstyle="padding-bottom: 3%;padding-left: 10%;">chainsaw</td></tr><tr><tdstyle="padding-bottom: 3%;text-align:right;">how many</td><tdstyle="padding-bottom: 3%;padding-left: 10%;">2</td></tr><tr><tdstyle="padding-bottom: 3%;text-align:right;">when:</td><tdstyle="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><tdstyle="padding-bottom: 3%;text-align:right;">who:</td><tdstyle="padding-bottom: 3%;padding-left: 10%;color:#FF8D58;">John s</td></tr></tbody></table><h2style="text-align:center;color:#484848;margin-top:2.5%;margin-bottom:5%;">steps to earn your money:</h2><divclass="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

Post a Comment for "Line Break In Html Table"