为什么我的文字溢出：省略号；没有工作吗？

我试图使文本不会太长，overflow:hidden但是我怎么使用text-overflow: ellipsis;？我已经使用了，但它无法正常工作。

这是我的代码的JSfillder

我不知道为什么它不起作用？

这是我的HTML代码

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

这是CSS代码

.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%;
}