的CSS格 - 內容內嵌，隱藏溢出

Question

這是我的html代碼

<div class="longtext"> 
    <div class="image"> 
     <img src="https://c1.staticflickr.com/8/7610/17149522281_3b6ae4c948_b.jpg" alt=""> 
    </div> 
    <div class="text"> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
    </div> 
    <div class="buy"> 
     <a href="#">$ 3053</a> 
    </div> 
    </div> 

我想實現顯示的所有內容內嵌，這樣的事情。

圖片已經定義的尺寸，和的.text寬度。買是未知的。 .buy必須始終以單行顯示。 .text也必須顯示在一行上，但不必顯示整個文本。

這裏是我的CSS尚未

.longtext { 
    border: 1px solid red; 
    overflow: hidden; 
} 
.longtext > * { 
    float: left; 
} 
.longtext img { 
    height: 60px; 
    width: 60px; 
} 
.buy { 
    float: right; 
    border: 1px solid blue; 
} 
.text { 
    border: 1px solid black; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
} 

Codepen

Answer 1

我會用flex父和align-items垂直對齊。將flex-grow: 1添加到.text（或簡稱爲flex: 1 0 0;），以便填充可用空間，並將overflow/ellipsis添加到p。然後，您可以從其他任何地方移除浮標。還將white-space: nowrap添加到.buy元素，因此$和數字之間的間隔不會中斷。

.longtext { 
 
    border: 1px solid red; 
 
    display: flex; 
 
    align-items: center; 
 
} 
 

 
.longtext img { 
 
    height: 60px; 
 
    width: 60px; 
 
    vertical-align: top; 
 
} 
 

 
.buy { 
 
    border: 1px solid blue; 
 
} 
 

 
.text { 
 
    border: 1px solid black; 
 
    overflow: hidden; 
 
} 
 

 
.text p { 
 
    text-overflow: ellipsis; 
 
    overflow: hidden; 
 
} 
 

 
.buy, .text { 
 
    white-space: nowrap; 
 
}

<div class="longtext"> 
 
    <div class="image"> 
 
     <img src="https://c1.staticflickr.com/8/7610/17149522281_3b6ae4c948_b.jpg" alt=""> 
 
    </div> 
 
    <div class="text"> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
    </div> 
 
    <div class="buy"> 
 
     <a href="#">$ 3053</a> 
 
    </div> 
 
    </div>

Answer 2

.longtext { 
 
    border: 1px solid red; 
 
    display: flex; 
 
} 
 

 
.longtext img { 
 
    height: 60px; 
 
    width: 60px; 
 
} 
 

 
.longtext div{ 
 
    vertical-align: top; 
 
} 
 

 
.buy { 
 
    border: 1px solid blue; 
 
} 
 

 
.text { 
 
    border: 1px solid black; 
 
    overflow: hidden; 
 
} 
 

 
.text p { 
 
    text-overflow: ellipsis; 
 
    overflow: hidden; 
 
} 
 

 
.buy, .text { 
 
    white-space: nowrap; 
 
}

<div class="longtext"> 
 
    <div class="image"> 
 
     <img src="https://c1.staticflickr.com/8/7610/17149522281_3b6ae4c948_b.jpg" alt=""> 
 
    </div> 
 
    <div class="text"> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
    </div> 
 
    <div class="buy"> 
 
     <a href="#">$ 30530000</a> 
 
    </div> 
 
    </div> 
 
    
 
    <div class="longtext"> 
 
    <div class="image"> 
 
     <img src="https://c1.staticflickr.com/8/7610/17149522281_3b6ae4c948_b.jpg" alt=""> 
 
    </div> 
 
    <div class="text"> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
    </div> 
 
    <div class="buy"> 
 
     <a href="#">$ 30500</a> 
 
    </div> 
 
    </div>