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