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

凯文·李

text-overflow: ellipsiswidth: 100%根据设备尺寸实现动态宽度时,我遇到了一个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;
}

我花了几个小时在StackOverflow上找到解决方案,但是我无法弄清楚如何p在显示...时通过截断部分宽度来实现标签具有与表宽度相同的全宽度。一条线。这是我最后想要的相关图像。

在此处输入图片说明

这是jsfiddle链接,谢谢!

令人沮丧的谢克尔·辛格

像下面这样width:100%宽度和table-layout:fixed你的桌子

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

您的表格将开始采用其父表格的宽度。

这是你想要的吗?

在这里检查jsfiddle

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

文本溢出省略号未以某些自定义字体显示

来自分类Dev

表格单元格上的文本溢出省略号在IE8和IE9中不起作用

来自分类Dev

块级元素是否支持文本溢出:省略号

来自分类Dev

文字溢出:IE中的省略号

来自分类Dev

滚动时文本溢出省略号未在Chrome和IE中显示溢出内容

来自分类Dev

CSS文字溢出省略号+以%表示的宽度无效

来自分类Dev

溢出问题:隐藏和文本溢出:省略号

来自分类Dev

如何选择我的溢出省略号开始的位置

来自分类Dev

文本溢出省略号和flex在Firefox上不起作用

来自分类Dev

在带有文本溢出省略号的行之后放置图标

来自分类Dev

CSS“文本溢出:省略号”,并将元素垂直居中

来自分类Dev

列表项的文本溢出省略号并保留数字

来自分类Dev

文字溢出省略号不起作用

来自分类Dev

Angular Material如何获取复选框文本溢出省略号

来自分类Dev

将文本放置在与第二行文本溢出省略号内联的点后

来自分类Dev

如何防止CSS Grid井喷,使文本溢出省略号起作用

来自分类Dev

文本在Firefox中的滚动元素中总是省略号

来自分类Dev

如何使文本溢出省略号3点可点击?

来自分类Dev

带有文件扩展名的文本溢出省略号

来自分类Dev

文字溢出:省略号;不截断溢出文本并给出省略号

来自分类Dev

CSS文字溢出:省略号不取决于宽度

来自分类Dev

在我的情况下,文本溢出省略号不起作用

来自分类Dev

具有多个跨度的文本溢出省略号

来自分类Dev

以“ 100%”宽度div显示省略号

来自分类Dev

文本溢出省略号不受位置影响:相对

来自分类Dev

使用文本溢出获取跨度中文本的宽度:省略号;在 IE11

来自分类Dev

CSS 文本溢出省略号无法正确显示

来自分类Dev

在 Chrome 和 Safari 下一行的列表项中使用文本溢出省略号链接

来自分类Dev

文本溢出:省略号不被尊重

Related 相关文章

  1. 1

    文本溢出省略号未以某些自定义字体显示

  2. 2

    表格单元格上的文本溢出省略号在IE8和IE9中不起作用

  3. 3

    块级元素是否支持文本溢出:省略号

  4. 4

    文字溢出:IE中的省略号

  5. 5

    滚动时文本溢出省略号未在Chrome和IE中显示溢出内容

  6. 6

    CSS文字溢出省略号+以%表示的宽度无效

  7. 7

    溢出问题:隐藏和文本溢出:省略号

  8. 8

    如何选择我的溢出省略号开始的位置

  9. 9

    文本溢出省略号和flex在Firefox上不起作用

  10. 10

    在带有文本溢出省略号的行之后放置图标

  11. 11

    CSS“文本溢出:省略号”,并将元素垂直居中

  12. 12

    列表项的文本溢出省略号并保留数字

  13. 13

    文字溢出省略号不起作用

  14. 14

    Angular Material如何获取复选框文本溢出省略号

  15. 15

    将文本放置在与第二行文本溢出省略号内联的点后

  16. 16

    如何防止CSS Grid井喷,使文本溢出省略号起作用

  17. 17

    文本在Firefox中的滚动元素中总是省略号

  18. 18

    如何使文本溢出省略号3点可点击?

  19. 19

    带有文件扩展名的文本溢出省略号

  20. 20

    文字溢出:省略号;不截断溢出文本并给出省略号

  21. 21

    CSS文字溢出:省略号不取决于宽度

  22. 22

    在我的情况下,文本溢出省略号不起作用

  23. 23

    具有多个跨度的文本溢出省略号

  24. 24

    以“ 100%”宽度div显示省略号

  25. 25

    文本溢出省略号不受位置影响:相对

  26. 26

    使用文本溢出获取跨度中文本的宽度:省略号;在 IE11

  27. 27

    CSS 文本溢出省略号无法正确显示

  28. 28

    在 Chrome 和 Safari 下一行的列表项中使用文本溢出省略号链接

  29. 29

    文本溢出:省略号不被尊重

热门标签

归档