web-dev-qa-db-ja.com

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

いくつかの内部コンテンツを含む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>

誰か助けてくれませんか。テキストコンテンツがコンテナからオーバーフローしたときに省略記号を使用しながら、赤い輪郭のスパン内にできるだけ多くのテキストを表示する必要があります...

前もって感謝します

ellipsiscss
15
sadmicrowave

インライン要素（スパン）にtext-overflow: Ellipsisを適用することはできません。ブロック要素でのみ使用できます（div）

また、white-space:nowrap;を使用する場合はtext-overflow: Ellipsis;を使用します

これを確認してください。概念実証のために、内部スパンをdivに変換しました。

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

なぜスパンを使用したのかわかりませんが、ロジックに従って、提案したように変更を加えることができます

更新：

誰かが質問でwhite-space: nowrap;をspan要素に入れると、text-overflow: Ellipsis:が機能していると思うので、間違っているかもしれませんが、質問者がfloat: leftを使用しているためそうではありません。スパンタグがボックスブロックに変換され、通常のブロックレベル要素のように機能することを意味するスパンタグ。これも間違っています。ブロック要素の動作が必要な場合は、ブロックレベル要素を使用するためです。

参照：

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

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

34
Saket Patel

問題の原因はtext-align：center;であることがわかると思います。

0
Peter Presnell

追加 white-space:nowrap;あなたの.innerdivに。

0
huzzah

これを追加：

white-space:nowrap;

to .flow-element .long

その後、オーバーフローエリプシスが機能します。

0
Sven Bieder