How to remove extra space caused by word-wrap in shrunk to fit element?
I am trying to use shrink to fit on #container
. It works perfectly until the elements it contains wrap. This causes it to expand to 180px.
#screen-dimensions
{
width: 250px;
height: 100px;
background-color: yellow;
}
#container
{
display: table;
background-color: pink;
border: 5px solid red;
}
#container > div
{
display: inline-block;
width: 160px;
background-color: lightblue;
border: 5px solid blue;
}
<div id="screen-dimensions">
<div id="container">
<div>content</div>
<div>content</div>
</div>
</div>
I understand why this behavior occurs but I haven't been able to find any workarounds.
Can this be fi开发者_JS百科xed?
Try using:
{
display: inline-flex;
}
I achieved that by playing around with the display properties:
#container
{
display: inline-block;
}
#container > div
{
display: block;
}
See: http://jsfiddle.net/feeela/Anc3v/
精彩评论