[英]word-break css not aligned accordingly
Is there a way that i can make the word align properly? 有没有一种方法可以使单词正确对齐? I tried to add word-break and word-wrap property in but it didn't make any different. 我试图在其中添加断字和自动换行属性,但没有任何区别。
<div class="transreview" style="float: right; background-color: #e0e0e0; word-wrap: break-word; border-radius: 5px; padding: 10 20 10 20px;">
<div class="transreview-item" style="float: right; clear: both; width: 100%; margin-bottom: 10px;">
<label class="transreview-label" style="clear: both; width: 79%; text-align: right;"><b>Subtotal</b></label>
<div class="review-label" style="float: right; text-align: right; height: 20px; width: 120px; padding: 5 5 5 5px">S$42.50</div>
</div>
<div class="transreview-item" style="float: right; clear: both; width: 100%; margin-bottom: 10px;">
<label class="transreview-label" style="clear: both; width: 79%; text-align: right;"><b>Total Shipping</b></label>
<div class="review-label" style="float: right; text-align: right; height: 20px; width: 120px; padding: 5 5 5 5px">S$42.50</div>
</div>
</div>
Turn it into a table. 把它变成桌子。 I made a Fiddle . 我做了一个小提琴 。 Just tweak the CSS and you should get the same result. 只需调整CSS,您将获得相同的结果。 But don't add CSS inline! 但是不要添加内联CSS!
HTML 的HTML
<table>
<tbody>
<tr>
<td>
Subtotal
</td>
<td>
<label>
S$42.50
</label>
</td>
</tr>
<tr>
<td>
Total Shipping
</td>
<td>
<label>
S$42.50
</label>
</td>
</tr>
<tr>
<td>
Tax
</td>
<td>
<label>
S$42.50
</label>
</td>
</tr>
<tr>
<td>
Discount
</td>
<td>
<label>
S$42.50
</label>
</td>
</tr>
<tr>
<td>
Total (including tax, if applicable)
</td>
<td>
<label>
S$42.50
</label>
</td>
</tr>
</tbody>
</table>
CSS 的CSS
table{
background-color: #E0E0E0;
border-radius: 5px;
padding: 4px 0;
}
td label{
background-color: #FFF;
border-radius: 5px;
padding: 4px 4px 4px 20px;
}
td{
padding: 4px;
}
You have to put the fixed width for both the Parent container and the label. 您必须为“父容器”和标签放置固定宽度。 Please check http://jsfiddle.net/fanafazil/rcye5m36 . 请检查http://jsfiddle.net/fanafazil/rcye5m36 。
<div class="transreview" style="float: right; background-color: #e0e0e0; word-wrap: break-word; border-radius: 5px; padding: 10 20 10 20px; width: 210px;"> <div class="transreview-item" style="float: right; clear: both; width: 100%; margin-bottom: 10px;"> <div style="float: left;width:100px;padding-right: 5px;"> <label class="transreview-label" style="clear: both; width: 79%; text-align: right;"><b>Sub Total</b></label> </div> <div class="review-label" style="float: right; text-align: right; height: 20px; width: 90px; padding: 5 5 5 5px; background-color:#FFFFFF;">S$42.50</div> </div> <div class="transreview-item" style="float: right; clear: both; width: 100%; margin-bottom: 10px;"> <div style="float: left;width:100px;padding-right: 5px;"> <label class="transreview-label" style="clear: both; width: 79%; text-align: right;"><b>Total Shipping</b></label> </div> <div class="review-label" style="float: right; text-align: right; height: 20px; width: 90px; padding: 5 5 5 5px; background-color:#FFFFFF;">S$42.50</div> </div> <div class="transreview-item" style="float: right; clear: both; width: 100%; margin-bottom: 10px;"> <div style="float: left;width:100px;padding-right: 5px;"> <label class="transreview-label" style="clear: both; width: 79%; text-align: right;"><b>Tax</b></label> </div> <div class="review-label" style="float: right; text-align: right; height: 20px; width: 90px; padding: 5 5 5 5px; background-color:#FFFFFF;">S$42.50</div> </div> <div class="transreview-item" style="float: right; clear: both; width: 100%; margin-bottom: 10px;"> <div style="float: left;width:100px;padding-right: 5px;"> <label class="transreview-label" style="clear: both; width: 79%; text-align: right;"><b>Discount</b></label> </div> <div class="review-label" style="float: right; text-align: right; height: 20px; width: 90px; padding: 5 5 5 5px; background-color:#FFFFFF;">S$42.50</div> </div> <div class="transreview-item" style="float: right; clear: both; width: 100%; margin-bottom: 10px;"> <div style="float: left;width:100px;padding-right: 5px;"> <label class="transreview-label" style="clear: both; width: 79%; text-align: right;"><b>Total Shipping(Including Tax and VAT)</b></label> </div> <div class="review-label" style="float: right; text-align: right; height: 20px; width: 90px; padding: 5 5 5 5px; background-color:#FFFFFF;">S$42.50</div> </div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.