幅100％のテキストを切り捨てることができません

Question

コンテナの幅として100%を使用すると、テキストを切り捨てることができません。あなたがテキストを見ることができますどのように

<div class="col-sm-2 hideable-sidebar" id="resource_container"> 
      <h4>Resource</h4> 

      <div class="input-group"> 
       <input type="text" placeholder="search" class="form-control" > 
       <span class="input-group-btn"> 
        <button class="clear btn btn-default" type="button"> 
         <span class="glyphicon glyphicon-remove"></span> 
        </button> 
        </span> 
      </div> 

      <table border='1' id='resource-container'> 
      <tr id="res-1"><td style="background-color:#FFCCC2" class="resource-color">&nbsp;&nbsp;</td><td style="padding-left: 10px"><div><strong>foooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</strong><br>test</div></td></tr> 
      <tr id="res-1"><td style="background-color:#F41FF2" class="resource-color">&nbsp;&nbsp;</td><td style="padding-left: 10px"><div><strong>foo</strong><br>teeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeest</div></td></tr> 
      <tr id="res-1"><td style="background-color:#F4CCC2" class="resource-color">&nbsp;&nbsp;</td><td style="padding-left: 10px"><div><strong>foo</strong><br>test</div></td></tr> 
      </table> 
     </div> 

が長すぎると：しかし、私は実際に私がブートストラップ使用していると私は、このHTML構造をした、検索バーなどの幅を設定するための私のテーブルに、この幅を適用する必要がありますテーブルから出てください。私はこのような状況をCSSで修正しようとしました：

#resource-container 
{ 
    margin-top:10px; 
    width:100%; 

    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
} 

しかし、これは残念ながら動作しません。誰かが私を助けることができましたか？ありがとう。

Answer 1

は、テキストを含む要素に切り捨てスタイルを入れてみてください：

は

#resource-container { 
    margin-top: 10px; 
    width: 100%; 
} 

#resource-container td div { 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    width: 100%; 
} 

---

編集：フィードバックパー、今のテーブルで動作するように、このために必要な追加のスタイルを追加しました。

#resource-container { 
 
    margin-top: 10px; 
 
    width: 100%; 
 
} 
 
#resource-container td:nth-child(2) { 
 
    width: 100%; 
 
    max-width: 1px; 
 
} 
 
#resource-container td:nth-child(2) div { 
 
    white-space: nowrap; 
 
    text-overflow: ellipsis; 
 
    overflow: hidden; 
 
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 
 

 
<div class="col-sm-2 hideable-sidebar" id="resource_container"> 
 
    <h4>Resource</h4> 
 

 
    <div class="input-group"> 
 
    <input type="text" placeholder="search" class="form-control"> 
 
    <span class="input-group-btn"> 
 
        <button class="clear btn btn-default" type="button"> 
 
         <span class="glyphicon glyphicon-remove"></span> 
 
    </button> 
 
    </span> 
 
    </div> 
 

 
    <table border='1' id='resource-container'> 
 
    <tr id="res-1"> 
 
     <td style="background-color:#FFCCC2" class="resource-color">&nbsp;&nbsp;</td> 
 
     <td style="padding-left: 10px"> 
 
     <div><strong>foooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</strong> 
 
      <br>test</div> 
 
     </td> 
 
    </tr> 
 
    <tr id="res-1"> 
 
     <td style="background-color:#F41FF2" class="resource-color">&nbsp;&nbsp;</td> 
 
     <td style="padding-left: 10px"> 
 
     <div><strong>foo</strong> 
 
      <br>teeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeest</div> 
 
     </td> 
 
    </tr> 
 
    <tr id="res-1"> 
 
     <td style="background-color:#F4CCC2" class="resource-color">&nbsp;&nbsp;</td> 
 
     <td style="padding-left: 10px"> 
 
     <div><strong>foo</strong> 
 
      <br>test</div> 
 
     </td> 
 
    </tr> 
 
    </table> 
 
</div> 
 

 
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
 
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>