why my text-overflow: ellipsis; did't work?
<p>i was trying to make the text wont be too long i have used <code>overflow:hidden</code> but how i use <code>text-overflow: ellipsis;</code>？ i have used but it wont work.</p>

<p>here is the <a href="https://jsfiddle.net/pvwzuhet/3/" rel="nofollow">JSfillder of my code</a> </p>

<p>i no sure why it didn't work?</p>

<p>this is my html code</p>

<pre><code>&lt;div class="profile-post-container"&gt;
  &lt;ul class="nav nav-tabs"&gt;
    &lt;li class="active btn-profile-post"&gt;&lt;a data-toggle="pill" href="#post"&gt;Post&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;div class="profile-post-answer-container tab-content"&gt;
    &lt;div id="post" class=" tab-pane fade in active"&gt;
      &lt;h3&gt;Post&lt;/h3&gt;
      &lt;table class="table table-hover table-list"&gt;
        &lt;tr class="a"&gt;
          &lt;td class="b"&gt;
            &lt;a href="chatroom.php?chatroomID=&lt;?php echo $row['id'];?&gt;"&gt;
              &lt;div class="list-block"&gt;
                &lt;p class="profile-post-setting"&gt;
                  aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                &lt;/p&gt;
              &lt;/div&gt;
            &lt;/a&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr class="a"&gt;
          &lt;td class="b"&gt;
            &lt;a href="chatroom.php?chatroomID=&lt;?php echo $row['id'];?&gt;"&gt;
              &lt;div class="list-block"&gt;
                &lt;p class="profile-post-setting"&gt;
                  aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                &lt;/p&gt;
              &lt;/div&gt;
            &lt;/a&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr class="a"&gt;
          &lt;td class="b"&gt;
            &lt;a href="chatroom.php?chatroomID=&lt;?php echo $row['id'];?&gt;"&gt;
              &lt;div class="list-block"&gt;
                &lt;p class="profile-post-setting"&gt;
                  aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                &lt;/p&gt;
              &lt;/div&gt;
            &lt;/a&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
      &lt;/table&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="profile-seeall-container"&gt;
    &lt;a href="#"&gt;
      &lt;button class="btn content-btn see-all-button"&gt;
        see all
      &lt;/button&gt;
    &lt;/a&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>this is css code</p>

<pre><code>.profile-post-container {
  width: 80%;
  height: auto;
  margin: 2.5% auto;
  padding: 2.5% 1% 2.5% 1%;
  background-color: #ffffff;
  display: block;
  vertical-align: top;
  border-radius: 25px;
}

.profile-post-answer-container {
  width: 100%;
  height: auto;
  display: block;
  vertical-align: top;
  text-align: left;
  background-color: red;
}

.profile-seeall-container {
  width: 100%;
  height: auto;
  display: block;
  vertical-align: top;
  text-align: right;
  padding-right: 2.5%;
  background-color: blue;
}

.table-list {
  display: block;
  width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

h3 {
  margin-left: .5%;
}
</code></pre>