スパン要素のテキストオーバーフローは、要素の幅の外側にあるテキストを外していません。

Question

divのサイズが小さいときに余分なテキストを切り取る、つまり中間の部分を3つのスパンで内側に圧縮しようとしています。

私が探している結果は、どういうわけかtext-overflow: ellipsis;スパンに適用されていない

A Very lon... A 
     ^here it should get cut with "text-overflow: ellipsis;" 

です。

何が不足していると思いますか？

width、display,overflowと試してみましたが、何も動作していないようです... ChromeとFirefoxの両方をテストしました。

div { 
 
    border-radius: 5px; 
 
    border: 1px solid #333; 
 
    padding: 10px 20px; 
 
    width: 100px; 
 
} 
 

 
div span { 
 
    text-overflow: ellipsis; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
} 
 

 
#long-text { 
 
    width: 20px; 
 
}

<div> 
 
    <span>A</span> 
 
    <span id="long-text">Very long text here....</span> 
 
    <span>A</span> 
 
</div>

Answer 1

spanインライン要素です。それは動作します何の幅やspan element.Then text-overflow: ellipsis;ためdisplay:inline-blockを試しheight.soを持っていない

div { 
 
    border-radius: 5px; 
 
    border: 1px solid #333; 
 
    padding: 10px 20px; 
 
    width: 100px; 
 
} 
 

 
div span { 
 
    text-overflow: ellipsis; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    display:inline-block; 
 
} 
 

 
#long-text { 
 
    width: 50px; 
 
}

<div> 
 
    <span>A</span> 
 
    <span id="long-text">Very long text here....</span> 
 
    <span>A</span> 
 
</div>

Answer 2

あなたはスパンブロック表示

div { 
 
    border-radius: 5px; 
 
    border: 1px solid #333; 
 
    padding: 10px 20px; 
 
    width: 100px; 
 
} 
 

 
div span { 
 
    display: inline-block; 
 
    text-overflow: ellipsis; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
} 
 

 
#long-text { 
 
    width: 20px; 
 
}

<div> 
 
    <span>A</span> 
 
    <span id="long-text">Very long text here....</span> 
 
    <span>A</span> 
 
</div>

に与えている欠けています

Answer 3

as XYZは前記スパンがインライン要素であると述べた。また、希望する効果に応じて、表示プロパティをブロックまたはインラインブロックに変更する必要があります。あなたの場合はそれは

#long-text{ 
display: inline-block 
width: 35px; 
} 

Answer 4

あなたの余白にパディングを変更します。

余白はオブジェクトの外側にスペースを与え、パディングはスペースを与えます。それはあなたがスパンのCSSを適用

Answer 5

div { 
 
border-radius: 5px; 
 
border: 1px solid #000000; 
 
width: 100px; 
 
text-overflow: ellipsis; 
 
display: block; 
 
overflow: hidden; 
 
padding: 10px 20px; 
 
} 
 

 
span { 
 

 
text-overflow: ellipsis; 
 
\t white-space: nowrap; 
 
\t overflow: hidden; 
 
    
 
}

<div> 
 
    <span>A</span> 
 
    <span id="long-text">Very long text here......</span> 
 
    <span>A</span> 
 
</div>