web-dev-qa-db-ja.com

「text-overflow：Ellipsis;」を取得できません。働く

「text-overflow：Ellipsis;」を取得できません。仕事に...たぶん誰かがそのことでmaにいくつかの助けを与えることができます:-)

小さな例： http://jsfiddle.net/qKS8p/2/

httpマークアップ：

<table class="" border="1">
    <tr><td colspan=3>…</td></tr>
    <tr class="">
        <td width="90"><span class="prose">column one</span></td>
        <td width="20"><span class="prose">column two</span></td>
        <td width="90"><span class="prose">column three</span></td>
    </tr>
    <tr><td colspan=3>…</td></tr>
</table>

cSSスタイルルール：

.prose {
  overflow: hidden;
  white-space: nowrap;
  -o-text-overflow: Ellipsis;
  -ms-text-overflow: Ellipsis;
  text-overflow: Ellipsis;
}

Tdの幅が20pxであるため、「列2」は切り刻まれるはずです。また、div、tdsなどを使用してさまざまなバリアントを試しましたが、何も変更されません。これは、私がチェックしたどのブラウザでも機能しないことに注意してください。確かに私が見逃しているものがあります。

例、ブラウザの違い、andおよびandに関する数百万のページがあります。しかし、私はこれを機能させることができません！現在の情報によると、単純なtext-overflow属性は現在、すべての主要なブラウザーでサポートされています。したがって、私は純粋なcssソリューション（xulではなく、jqueryプラグインではない）を探しています。これはが機能するはずだからです。

ありがとう、arkascha

ellipsiscss
17
arkascha

この例のコードの問題は、20pxより多くのコンテンツがある場合、テーブルが自動的に拡大され、20pxの設定された幅を無視することです。これが機能する例です： http://jsfiddle.net/qKS8p/34/

追加した：

span {
  display:block;
  width:inherit;
}
15
Mario Vlad

このフィドルは私にとってはうまくいきます： http://jsfiddle.net/wRruP/3/

HTML

<div><span>column one</span></div>
<div>column two</div>
<div><p>column three</p></div>

### CSS

div {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: Ellipsis;
    width: 40px;
}

テキストの幅を実際に制約しているブロックにtext-overflowを設定する必要があるようです。 <span>は、実際には幅がないためテキストを切り取ることはできないインライン要素であり、<p>をネストすると、プロパティを継承しませんでした。

31
millimoose

両方のtext-overflowプロパティと同じブロックレベル要素の固定幅（divなど）、 このように ：

<table class="" border="1">
    <tr><td colspan=3>…</td></tr>
    <tr class="">
        <td><div class="prose" style="width: 90px">column one</div></td>
        <td><div class="prose" style="width: 20px">column two</div></td>
        <td><div class="prose" style="width: 90px">column three</div></td>
    </tr>
    <tr><td colspan=3>…</td></tr>
</table>

元のCSSで：

.prose {
  overflow: hidden;
  white-space: nowrap;
  -o-text-overflow: Ellipsis;
  -ms-text-overflow: Ellipsis;
  text-overflow: Ellipsis;
}
4
Ilmari Karonen