如何使跨度不顯示文本的額外數量

Question

我有以下的CSS元素。 CSS如下

.bill-item { 
    width: 253px; 
    height: 60px; 
    background-color: white; 
    border: 1px solid #dadada; 
    border-radius: 6px; 
    margin-left: 22px; 
    margin-top: 15px; 
    margin-bottom: 15px; 
} 

.item-drop-point { 
    height: 40px; 
    width: 253px; 
    border: 1px dashed #dadada; 
    text-align: center; 
    background-color: white; 
    border-radius: 6px; 
    margin-left: 22px; 
    margin-top: 15px; 
    margin-bottom: 15px; 
} 

.item-drop-point span { 
    color: #dadada; 
    vertical-align: -10px; 
} 

.bill-item-img { 
    height: 60.4px; 
    width: 60px; 
    float: left; 
    border-radius: 5px; 
    background-image: url(../images/bill_item_img.jpg); 
    background-repeat: no-repeat; 
    background-size: cover; 
} 

.bill-item-description { 
    width: 148px; 
    float: left; 
    height: 100%; 
} 

.bill-item-price { 
    float: left; 
    padding: 8px 0px 0px 7px; 
    width: 107px; 
    height: 25px; 
    font-family: MyriadProReg; 
} 

.bill-item-amount { 
    float: right; 
    padding: 8px 0px 0px 7px; 
    width: 25px; 
    height: 22px; 
    border-left: 1px solid rgb(230, 230, 230); 
} 

.bill-amount-selection { 
    width: 44.9px; 
    height: 100%; 
    float: right; 
    background-image: url(../images/item_amount_selection_bg.jpg); 
    border-top-right-radius: 5px; 
    border-bottom-right-radius: 5px; 
} 

.amount-increase { 
    height: 50%; 
    width: 100%; 
    background-image: url(../images/item_amount_inc.jpg); 
    background-position: center center; 
    background-repeat: no-repeat; 
    display: block; 
} 

.amount-decrease { 
    height: 50%; 
    width: 100%; 
    background-image: url(../images/item_amount_dec.jpg); 
    background-position: center center; 
    background-repeat: no-repeat; 
    display: block; 
} 

.bill-item-name { 
    padding-top: 5px; 
    border-bottom: 1px solid rgb(230, 230, 230); 
    height: 25px; 
    font-family: MyriadProReg; 
} 

.bill-item-name-left { 
    float: left; 
    padding-left: 6px; 
    padding-right: 5px; 
    padding-top: 4px; 
    font-family: MyriadProReg; 
    font-weight: normal; 
    font-size: 14px; 
} 

.bill-item-name-right { 
    float: right; 
    padding-top: 3px; 
    color: #878787; 
    font-family: MyriadProReg; 
    font-weight: 400; 
} 

我使用ajax文章加載文本所以有些時候我得到更多的字符，我可以在元素中顯示。我希望你能從下面的圖像中得到一個想法。

股利層級以下。

<div class="bill-item"> 

            <!-- Item image --> 
            <div class="bill-item-img"></div> 

            <!-- Item description --> 
            <div class="bill-item-description"> 
             <div class="bill-item-name"> 

              <!-- Item Name --> 
              <p class="bill-item-name-left">Normal Cofee</p> 

              <!-- Item Price --> 
              <p class="bill-item-name-right">170.00</p> 

              <div class="clear"></div> 
             </div> 

             <!-- Total item price --> 
             <div class="bill-item-price"> 
              <span>170.00</span> 
             </div> 

             <!-- Item Quantity --> 
             <div class="bill-item-amount"> 
              <span>1</span> 
             </div> 

            </div> 

            <!-- Increas & Decrease item Quantity --> 
            <div class="bill-amount-selection"> 
             <a class="amount-increase" href="#"></a> 
             <a class="amount-decrease" href="#"></a> 
            </div> 

           </div> 

如何使用CSS修復此問題..請幫助我！

Answer 1

將此作爲答案顯示CSS類bill-item-name-left上的更改，是否嘗試過類似的操作？

.bill-item-name-left { 
    float: left; 
    padding-left: 6px; 
    padding-right: 5px; 
    padding-top: 4px; 
    font-family: MyriadProReg; 
    font-weight: normal; 
    font-size: 14px; 
    white-space: nowrap; 
    overflow:hidden; 
} 

如果做的伎倆，你應該檢查你可以溢出設置，甚至使用文本overflow屬性，更多的信息價值：http://www.w3schools.com/cssref/css3_pr_text-overflow.asp