0

JSFIDDLE:

http://jsfiddle.net/vxghC/4/

HTML:

<div class="study-box folder-box">
    <div class="folder-box-title">
        <div> TEST TEST TEST TEST TEST </div>
    </div>
</div>

JS:

.folder-box-title > div {
margin-left: 10px;
margin-bottom: 7px;
-ms-text-overflow: ellipsis !important;
-o-text-overflow: ellipsis !important;
text-overflow: ellipsis !important;
white-space:nowrap;
}
.study-box {
    width: 200px;
    height: 120px;
    margin: 2px;
    color: white;
    background-color: blue;
    text-align: center;
    font-size: 15px;
}

私は何を間違っていますか？

4

2 に答える 2

3

overflow:hiddenまたはoverflow:autoを次のように追加してみてください.folder-box-title: http://jsfiddle.net/cWDtM/

詳細はこちら: http://quirksmode.org/css/user-interface/textoverflow.html

text-overflow が機能するのは、次の場合のみです。

  1. ボックスには可視以外のオーバーフローがあります (オーバーフローがある場合: テキストは単にボックスから流れ出ます)
  2. ボックスには white-space: nowrap またはテキストのレイアウト方法を制約する同様の方法があります。(これがないと、テキストは次の行に折り返されます)
于 2013-07-15T18:01:59.877 に答える
1

テキストを含む divに a を指定する必要がありwidth、テキストoverflowをコンテナーにしないでください。

width:150px;
overflow:hidden;

デモ: http://jsfiddle.net/vxghC/6/

于 2013-07-15T18:02:24.077 に答える