37787
いつもお世話になっております。  
とある開発で、IE8対応を行う必要が出てきたのですが、  
どうにもうまく行かないためこちらに質問させていただきます。

テーブルの幅を固定してtd内に記載している文字列が幅以上になれば

```

    text-overflow: ellipsis;
    
```

を使い hogehoge... といったように表示させたいのですが、現状Tableの幅が広がり  
全ての文字列が表示されてしまっている状態です。（Chrome/Firefoxでは表示はうまく行っているので、IE特有？の問題でしょうか？)

どなたか解決策を教えていただけないでしょうか？

下記、現在作成しているテーブルのHTMLおよびCSSになります。

```

    <!-- html -->
    <table style="width: 200px">
      <tbody>
        <tr>
          <td class="hoge" style="width: 180px;">
            <a style="width: 180px" href="#")>長い文字列はここに表示されます。</a>
          </td>
          <td class="right_icon" style="width: 20px">
            <a class="mini_icon icon_web_font" tabIndex=-1 href="#">+</a>
          </td>
        </tr>
      </tbody>
    </table>
    
```

```

    /** CSS **/
    .hoge {
      margin-top: 5px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: inline-block;
      white-space: nowrap;
    }
    
```

お手数ですが、上記よろしくお願いいたします。
CC BY-SA 3.0
2017-08-17T04:17:23.303
37265
2017-09-07T18:33:11.303
2017-08-17T06:42:46.900
19110
20774
question
html css
テーブル内の要素にtext-overflow: ellipsis;をかけたい(IE8)
aは`inline`です。したがってwidthを指定することはできません。<https://www.w3schools.com/html/html_blocks.asp>

IEで確認できないので、下記を試してみてください。  
hogeを当てる場所を間違えている気がします。

```

    <table style="width: 200px">
      <tbody>
        <tr>
          <td style="width: 180px;">
            <a class="hoge" href="#">長い文字列はここに表示されます。</a>
          </td>
          <td class="right_icon" style="width: 20px">
            <a class="mini_icon icon_web_font" tabIndex=-1 href="#">+</a>
          </td>
        </tr>
      </tbody>
    </table>
    
```

CSS

```

    /** CSS **/
    .hoge {
        margin-top: 5px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block;
        white-space: nowrap;
        /** 追加 **/
        width: 180px ;
        height: 16px ;
        line-height: 16px ;
    }
    
```
CC BY-SA 3.0
2017-09-07T18:26:51.767
37787
2017-09-07T18:33:11.303
2017-09-07T18:33:11.303
18542
18542
37265
answer