带有多个跨度的文本溢出省略号

Question

我的div里面包含三个span个元素。这三个span元素构成一个单独的文本，我希望将其限制为单行。如果宽度大于div

，我想对文本应用省略号

JSFiddle here

HTML：

<div class="box">
  <span>First text</span>
  <span>Second text</span>
  <span>Third long, long text</span>
</div>

CSS：

.box{
  border: 1px solid red;
  width: 200px;
}

Answer 1

我想这就是你想要的？

.box{
  border: 1px solid red;
  width: 200px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

JSFiddle：https://jsfiddle.net/g56rffds/1/