开发者

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/

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜