CSS創建一個div，當其他兄弟div與其內容一樣寬時，需要剩餘父寬度？

我該如何着手創建下一個佈局：CSS創建一個div，當其他兄弟div與其內容一樣寬時，需要剩餘父寬度？

兩個div共享一個共同父項的寬度。他們都顯示在一個單行文本內容，而 -

右邊的DIV是一樣寬，它的文本內容
左邊的DIV佔用父和使用的所有剩餘寬度文本溢出：省略號顯示'...'，文本被剪切。

這裏是什麼，我想我知道這應該如何實現 -

.parent { 
 
    width: 400px; 
 
    height: 200px; 
 
} 
 

 
.left { 
 
    display: block; 
 
    white-space: nowrap; 
 
    text-overflow: ellipsis; 
 
    overflow: none; 
 
} 
 

 
.right { 
 
    display: inline-block; 
 
}

<div class='parant'> 
 
    <div class='left'> This div should display all text content possible without line-breaking and display '...' where its being cut </div> 
 
    <div class='right'> This div is as wide as its text content </div> 
 
</div>

它應該看起來像this example

來源

2017-08-16 Tomer Sharon

您可以使用Flexbox，就這一點，只需設置display: flex對家長和flex-shrink: 0正確的元素。

.parent { 
 
    width: 400px; 
 
    height: 200px; 
 
    display: flex; 
 
} 
 
.left { 
 
    white-space: nowrap; 
 
    text-overflow: ellipsis; 
 
    overflow: hidden; 
 
    background: red; 
 
} 
 
.right { 
 
    background: lightblue; 
 
    flex-shrink: 0; 
 
}

<div class='parent'> 
 
    <div class='left'> This div should display all text content possible without line-breaking and display '...' where its being cut </div> 
 
    <div class='right'> This div is as wide as its text content </div> 
 
</div>

來源

2017-08-16 11:54:32

可能是你應該刪除彈性收縮，因爲隨着含量的增加長度.right它的工作原理非常類似於空白：NOWRAP而不是將它們打破到下一行。 – frnt

@frnt我同意你的觀點，在我看來，最好用'flex：1'。 – weBBer

它工作完美。我需要添加的所有內容都是左側組件上的「flex：1」，以便在兩個div的內容不足以填充父寬度時填充剩餘空間。 –

試試這個

.parent { 
 
    width: 300px; 
 
    height: 200px; 
 
    overflow: hidden; 
 
    display: flex; 
 
} 
 
.left { 
 
    white-space: nowrap; 
 
    text-overflow: ellipsis; 
 
    overflow: hidden; 
 
    
 
} 
 
.right { 
 
    white-space: nowrap; 
 
    text-overflow: ellipsis; 
 
    overflow: hidden; 
 
    
 
}

<div class='parent'> 
 
    <div class='left'> This div should display all text content possible without line-breaking and display '...' where its being cut </div> 
 
    <div class='right'> This div is as wide as its text content </div> 
 
</div>

來源

2017-08-16 11:51:44

您可以使用flexbox爲您的要求。它非常簡單，它可以像任何其他display屬性一樣工作。您可以檢查codepen link。這工作100％。

CSS

.container { 
    display: flex; 
    max-width: 500px; 
    border: 1px solid #ddd; 
    padding: 5px; 
} 
.one, 
.two { 
    flex-grow: 1; 
    word-break: break-all; 
    padding: 10px; 
    color: #fff; 
} 
.one { 
    background-color: red; 
} 
.two { 
    background-color: blue; 
}

來源

2017-08-16 12:00:50 Abinthaha

我認爲這是更好的使用Flexbox這一點。您應該給display: flex;至.parent和flex:1;至.left。這將做你的伎倆，它不會超過家長寬度也。

.parent { 
 
    width: 100%; 
 
    height: 200px; 
 
    display: flex; 
 
} 
 
.left { 
 
    white-space: nowrap; 
 
    text-overflow: ellipsis; 
 
    overflow: hidden; 
 
    background: pink; 
 
    flex:1; 
 
} 
 
.right { 
 
    background: green; 
 
}

<div class='parent'> 
 
    <div class='left'> This div should display all text content possible without line-breaking and display '...' where its being cut </div> 
 
    <div class='right'> This div is as wide as its text content </div> 
 
</div>

來源

2017-08-16 12:04:11 weBBer

CSS創建一個div，當其他兄弟div與其內容一樣寬時，需要剩餘父寬度？

回答

相關問題