HTML表格中的换行符 [英] 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.
问题陈述:
我想知道我应该在小提琴中进行哪些更改，以便能够在屏幕截图所示的以下行之间给出换行符，这是小提琴中的 .
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.
我在小提琴中为上述几行使用的HTML代码段是:
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>
推荐答案
这是我所做的:
将line-break类添加到指定的<td>
您可以使用word-wrap: break-word;在div中多行文本.
word-wrap基于div的width工作.
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>
这是 JSFiddle
这篇关于HTML表格中的换行符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
