CSSテキストオーバーフローの省略記号が表示されない

Question

オーバーフローしたときに省略記号を付ける必要がある内部コンテンツを持つdivがあります。私は他の要素についてこれを何回もやったことがありますが、何らかの理由でこれが期待どおりに動作していません。

また、white-space:nowrap;は、コンテンツがスパン内の次の行に折れないため、私は省略記号が始まる前に2-3ワードしか表示されないため、意図的に出力されませんでした。テキストを親コンテナの高さ全体に広げ、その境界を越えて存在するコンテンツの省略記号を開始したいと思います。ここで

は、作業のデモです：http://jsfiddle.net/sadmicrowave/DhkSA/

CSS：

.flow-element{ 
    position:absolute; 
    font-size:12px; 
    text-align:center; 
    width:75px; 
    height:75px; 
    line-height:70px; 
    border:1px solid #ccc; 
} 

.flow-element .inner{ 
    position:absolute; 
    width:80%; 
    height:80%; 
    border:1px solid blue; 
    top:0px; 
    bottom:0px; 
    left:0px; 
    right:0px; 
    margin:auto; 
    text-align:center; 
} 

.flow-element .long{ 
    float:left; 
    height:50px; 
    width:100%; 
    line-height:12px; 
    border:1px solid red; 
    text-overflow:ellipsis; 
    overflow:hidden; 
} 

HTML：

<a class='flow-element' style='top:100px; left:50px;'> 
    <div class='inner'> 
    <span class='long'>Box 1 and some other content that should wrap and do some other stuff</span> 
    </div> 
</a> 

誰かが助けてください。私は事前

Answer 1

あなたは要素（スパン）をインライン化するtext-overflow: ellipsisを適用することはできません、それが唯一のブロック要素で使用することができます（DIV）

ともtext-overflow: ellipsis;

チェックこれを使用しているとき、私はあなたを変換したwhite-space:nowrap;を使用あなたはスパンを使用している理由を私は知らないが、あなたのロジックに従って、あなたがチャンを作ることができるだけの概念

http://jsfiddle.net/3CgcH/5/

の証明のために、DIVするインナースパン私が示唆したように、ES

更新：誰かが質問に私はその後、text-overflow: ellipsis:は私が間違っているかもしれので、働いている要素にまたがることwhite-space: nowrap;を置けばと思いますが、それは質問者ので、そうではありません

spanタグにfloat: leftを使用しました。これは、spanタグがボックスブロックに変換され、通常のブロックレベルの要素と同様に動作することを意味します。ブロック要素の動作が必要な場合はブロックレベル要素を使用するため、間違ったことです。

参考：

http://www.w3.org/TR/CSS2/visuren.html#propdef-float

http://dev.w3.org/csswg/css3-ui/#text-overflow

Answer 2

で

おかげで、あなたの.innerのDIVにwhite-space:nowrap;を追加...テキストコンテンツは、コンテナをオーバーフローしたときに省略記号を持ちながら赤概説スパン内で可能な限り多くのテキストを表示する必要があります。

Answer 3

この追加：.flow-要素をし、その後オーバーフローellispsis作品

を.LONG

white-space:nowrap; 

を。

Answer 4

私はあなたがtext-align：center;を持っていることが原因で問題が発生すると思います。