Css 文本溢出：带内联块的省略号_Css_Ellipsis

Css 文本溢出：带内联块的省略号

css

Css 文本溢出：带内联块的省略号,css,ellipsis,Css,Ellipsis,我有以下html代码 <html> <head> <style> span { display:inline-block; } </style> </head> <body> <div style='width:60px; white-space:nowrap; overflow:hidden; text-overflow:elli

我有以下html代码

<html>
  <head>
    <style>
      span {
        display:inline-block;
      }
    </style>
  </head>
  <body>
    <div style='width:60px; white-space:nowrap; overflow:hidden;
      text-overflow:ellipsis'>
      <span>abc</span> 
      <span>def</span> 
      <span>ghi</span> 
      <span>jkl</span>
    </div>
  </body>
</html>


跨度{
显示：内联块；
}
abc
def
ghi
jkl

结果如下：

abc def g （g部分裁剪）

问题）如何使其看起来像：

abc def g

提前谢谢

它在Firefox中工作，所以我认为这是webkit引擎中的一个bug。确认在Firefox中工作。使用

display:inline block

设置所有跨度元素会干扰Chrome。删除它修复了Chrome中的问题。此外，如果要显示“g”，则需要增加div的宽度。省略号占据了部分空间。