文本溢出省略号与几个跨度

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/