word-break css沒有相應地對齊

有沒有一種方法可以讓這個詞正確對齊？我試圖添加word-break和word-wrap屬性，但它沒有任何不同。word-break css沒有相應地對齊

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

來源

2015-10-16 SitiNuraini Yakob

首先：清理你的HTML，不使用內聯CSS。如果你能夠創建一個小提琴並且描述你想要你的標籤的方式會更好 – Chris

把它變成一個表。我做了一個Fiddle。只需調整CSS，你應該得到相同的結果。但不要添加CSS內聯！

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

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; 
}

來源

2015-10-16 07:47:22

你必須把固定寬度的父容器和標籤兩者。請檢查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>

來源

2015-10-16 09:17:03

word-break css沒有相應地對齊

回答

相關問題