產品上的CSS收據wordwrap

Question

使用此代碼，我生成一個CSS/HTML Receipt。但我有問題，長productnames

.boxReceipt { 
 
    width:300px; 
 
} 
 
ul { 
 
    list-style: none; 
 
} 
 
.receiptList > li { 
 
    padding: 0 2px; 
 
    position: relative; 
 
} 
 
.receiptList > li:not(:first-child) { 
 
    border-top: 1px solid rgba(136, 136, 136, 1); 
 
    margin-top: 5px; 
 
    padding-top: 5px; 
 
} 
 
.receiptList > li > .receiptPrice { 
 
    font-weight: bold; 
 
    position: absolute; 
 
    right: 2px; 
 
    text-align: right; 
 
}

<div class="boxReceipt"> 
 
    <ul class="receiptList"> 
 
    <li> 
 
     <span class="receiptName">Product 1</span> 
 
     <span class="receiptPrice">USD 124.90</span> 
 
    </li> 
 
    <li> 
 
     <span class="receiptName">Veryver very very very long product 2</span> 
 
     <span class="receiptPrice">USD 124.90</span> 
 
    </li> 
 
    <li> 
 
     <span class="receiptName">Product 3</span> 
 
     <span class="receiptPrice">USD 124.90</span> 
 
    </li> 
 
    </ul> 
 
</div>

在很長desription我需要將wordWrap。我怎樣才能使它與固定寬度？ 在這一刻，prouct名是在價格

Answer 1

你可以使<span class="receiptName">和<span class="receiptPrice">浮動：左，這將導致他們坐並排側，而不必惹他們的位置的規則。

要做到這一點，首先更改位置：絕對到位置：相對在CSS選擇receiptPrice元素

.receiptList > li > .receiptPrice { 
    font-weight: bold; 
    position: absolute; <--- change to -> position:relative; 

這將導致跨度不是從位置上刪除本身父母的規則。

然後定義跨越的寬度

.receiptName { 
    width:66%; 
} 

.receiptPrice { 
    width:33%; 
} 

，然後將clearfix添加到li元素，這將導致溢出到正常工作

.receiptList > li:after { 
    content: ""; 
    display: table; 
    clear: both; 
} 

HTML：

<div class="boxReceipt"> 
    <ul class="receiptList"> 
    <li> 
     <span class="receiptName">Product 1</span> 
     <span class="receiptPrice">USD 124.90</span> 
    </li> 
    <li> 
     <span class="receiptName">Veryver very very very long product 2</span> 
     <span class="receiptPrice">USD 124.90</span> 
    </li> 
    <li> 
     <span class="receiptName">Product 3</span> 
     <span class="receiptPrice">USD 124.90</span> 
    </li> 
    </ul> 
</div> 

css

.boxReceipt { 
    width:300px; 
} 
ul { 
    list-style: none; 
} 
.receiptList > li { 
    padding: 0 2px; 
    position: relative; 
} 
.receiptList > li:not(:first-child) { 
    border-top: 1px solid rgba(136, 136, 136, 1); 
    margin-top: 5px; 
    padding-top: 5px; 
} 
.receiptList > li > .receiptPrice { 
    font-weight: bold; 
    position: relative; 
    right: 2px; 
    text-align: right; 
} 
.receiptName, .receiptPrice { 
    float:left; 
    display:inline-block; 
} 

.receiptName { 
    width:66%; 
} 

.receiptPrice { 
    width:33%; 
} 

.receiptList > li:after { 
    content: ""; 
    display: table; 
    clear: both; 
} 

這是小提琴：https://jsfiddle.net/xhabd5jf/1/