0

  p{
    width: 300px;
    margin: 0 auto;
  }
  span{
    display: inline-block;
  }
  .left{
    width: 40%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
<p class="test">
    <span class="left">TestTestTestTest</span>    
    <span class="right">Test</span>
</p>

And then it will display like this, I think the reason why display like this maybe the property 'overflow: hidden' created a bfc, so I set the property 'overflow: hidden' or 'float: right' for '.right', and then '.right' align to '.left'.

but I've seen description of BFC from MDN, it says that display:inline-block will creating a BFC, So the BFC of each span tags should already be created because of the css rule span {display: inline-block}, but why they are not align before I set the properties for '.right' ?

finally,please don't focus on my poor English, I just wanna find the answer for the question I've met, and I think I will get it by this way . Thank you!

O(∩_∩)O~

Jiang Guoxi
  • 3
  • 3

1 Answers1

0

Just give vertical-align: top; to span. Because inline-block default vertical-align is baseline.

p{
    width: 300px;
    margin: 0 auto;
  }
  span{
    display: inline-block;
    vertical-align: top;
  }
  .left{
    width: 40%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
<p class="test">
    <span class="left">TestTestTestTest</span>    
    <span class="right">Test</span>
</p>
ketan
  • 19,129
  • 42
  • 60
  • 98
  • Would you mind telling me why the default ```vertical-align``` of span can't make them align ? and this appearance is ralated to BFC or not ? – Jiang Guoxi Jan 06 '16 at 07:13
  • Because you use `display:inline-block`. And inline-block default vertical-align is baseline. Read answer for more details. http://stackoverflow.com/questions/12950479/why-does-inline-block-element-having-content-not-vertically-aligned – ketan Jan 06 '16 at 07:18