html - 具有多个跨度的文本溢出省略号

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/