Question

我试图让文字不会太长，我使用overflow:hidden，但我如何使用text-overflow: ellipsis;？我已经使用但它不会工作。

我不确定为什么它不起作用？

这是我的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%;
}

Answer 1

您必须将此cssto添加到profile-post-setting元素：

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

这样，元素知道显示文本的空间大小以及何时显示省略号。在您的示例中，您已将text-ellipsis添加到表中，并且不负责显示深深嵌套在其上的dom元素的省略号。这是更新的jsfiddle

Answer 2

你应该给div（.list-block）一个特定的宽度。并删除p标签。

＆＃13;

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

＆＃13;

<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

＆＃13;

Answer 3

请提及要放置它的元素的宽度。

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

}

为什么我的文本溢出：省略号;没有工作？

3 个答案: