how to make a span not show the excess amount of text - html

Question

I've got the following css element. the CSS is as following
.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;
}
I load text using an ajax post so some times I get more characters that I can show in the element. I hope you can get an idea from the following image.
The div hierarchy is following.
<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>
How can I fix this issue using CSS.. please help me!

Answer 1

Posting this as an answer to show the changes on the CSS class bill-item-name-left, did you tried something like this ?
.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;
}
If that does the trick, you should check the value you can set on the overflow or even use the text overflow property, more info : http://www.w3schools.com/cssref/css3_pr_text-overflow.asp