0

我有以下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>

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

4

1 回答 1

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

如果这样做了，你应该检查你可以在溢出上设置的值，甚至使用文本溢出属性，更多信息：http ://www.w3schools.com/cssref/css3_pr_text-overflow.asp

于 2013-05-10T13:12:46.123 回答