オーバーフロー-Xのテキストオーバーフロー

Question

.whysolong { 
    overflow-x: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
} 

入れ

<div class="whysolong">So many people here but only 3 or four global apps grow UP?</div> 

OK div中！ここ

そう多くの人々....

とspanまだここに全文..

そう多くの人々が、わずか3または4つのグローバルアプリケーションを示す

<span class="whysolong">So many people here but only 3 or four global apps grow UP?</span> 

成長する？

なぜですか？

Answer 1

テキストオーバーフローは、ブロックまたはインラインブロックレベルの要素でのみ発生します。これは、要素がオーバーフローするために幅を持つ必要があるためです。オーバーフローは、direction propertyまたは関連する属性によって決定される方向に発生します。

.whysolong { 
 
    overflow-x: hidden; 
 
    text-overflow: ellipsis; 
 
    white-space: nowrap; 
 
    width: 154px; 
 
} 
 

 
.whysolongblock { 
 
    overflow-x: hidden; 
 
    text-overflow: ellipsis; 
 
    white-space: nowrap; 
 
    width: 154px; 
 
    display: block; 
 
}

<div class="whysolong">So many people here but only 3 or four global apps grow UP?</div> 
 
<span class="whysolong">So many people here but only 3 or four global apps grow UP?</span> 
 
<div class="whysolongblock">So many people here but only 3 or four global apps grow UP?</div> 
 
<span class="whysolongblock">So many people here but only 3 or four global apps grow UP?</span>

注：コンテナのオーバーフロープロパティが値hidden、scroll又はautoとwhite-space: nowrap;を有する場合text-overflowのみ起こります。

Answer 2

スパンは、ブロックまたはインラインブロック表示のいずれかを持つ必要があります。それ以外の場合は、インライン要素です。

Answer 3

DIVとSPANの違いは、1つがブロック要素であり、他がインライン要素であるためです。

あなたは見ることができます： はWhat is the difference between HTML tags <div> and <span>?

http://cssreset.com/understanding-the-difference-between-div-and-span/

Answer 4

プロパティtext-overflowは、コンテナ要素のみをブロックするように適用されます。 A <span>要素は、デフォルトではインライン要素であるため、この属性をサポートしていません。 <span>のサポートtext-overflowをブロックレベルの要素として定義する必要があります。

span { 
    display: block; 
    text-overflow: ellipsis; 

}