宽度 100% 元素中的文本溢出省略号实现

Question

我在根据设备尺寸以 width: 100% 等动态宽度实现 text-overflow: ellipsis 时遇到了一个 CSS 问题。（特别是移动响应）

HTML:

<table class="table">
  <tr>
    <td>
      <p class="text">
        This is what I want to show by using ellipsis. This is what I want to show by using 
        ellipsis. This is what I want to show by using ellipsis
      </p>
    </td>
  </tr>
</table>

CSS:

.text {
  max-width: 100%;
  /* width: 100%; */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

我花了几个小时在 Whosebug 上找到解决方案，但我不知道如何实现 p 标签的全宽与 table 的宽度相同通过在一行中截断超过宽度的部分来显示 ... 时的宽度。这是我最终想要的相关图片。

这里是jsfiddlelink 提前致谢！

Answer 1

只需将 width:100% 宽度和 table-layout:fixed 赋予您的 table，如下所示

.table {
  width:100%;
  table-layout:fixed;
}
.text {
  max-width: 100%;
  /* width: 100%; */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

您的 table 将开始占用其父级的宽度。

这是你想要的吗？

在此处勾选 jsfiddle

宽度 100% 元素中的文本溢出省略号实现

text-overflow ellipsis implementation in width 100% element

html

css

responsive