why my text-overflow: ellipsis; did't work?

Question

i was trying to make the text wont be too long i have used overflow:hidden but how i use text-overflow: ellipsis;？ i have used but it wont work.

here is the JSfillder of my code

i no sure why it didn't work?

this is my html code

<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>

this is css 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%;
}

Answer 1

Please Mention the width of that element on which you want to put it.

.profile-post-setting {
    width: 350px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;

}

Answer 2

you should give a specific width to the div (.list-block). and remove the p tag.

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

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

h3 {
  margin-left: .5%;
}

<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">
       
                  aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                
              </div>
            </a>
          </td>
        </tr>
        <tr class="a">
          <td class="b">
            <a href="chatroom.php?chatroomID=<?php echo $row['id'];?>">
              <div class="list-block">

                  aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                
              </div>
            </a>
          </td>
        </tr>
        <tr class="a">
          <td class="b">
            <a href="chatroom.php?chatroomID=<?php echo $row['id'];?>">
              <div class="list-block">
 
                  aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

Answer 3

You have to add this cssto the profile-post-setting element:

.profile-post-setting {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 450px;
}

This way the element knows how much space it has to show the text and when to show the ellipses. In your example you have added the text-ellipsis to the table and it is not responsible to show the ellipsis for a dom element deeoply nested on it. Here is the updated jsfiddle