Html 如何使跨距不显示多余的文本

我有以下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层次结构如下所示

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

普通咖啡

170.00
170
1.

---

如何使用CSS解决此问题。。请帮帮我

将此作为答案发布，以显示CSS类账单项目名称左侧的更改，您是否尝试过类似的操作

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

---

如果这样做了，您应该检查可以在溢出上设置的值，甚至可以使用文本溢出属性，更多信息：

空白：nowrap和
溢出：隐藏？这就成功了！但我需要增加一个固定的宽度！那就行了！：）