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

BL Praveen

仅当宽度以像素为单位且不接受百分比时,文本溢出才会起作用。我在使用Firefox时遇到问题,不了解其他浏览器。

<div class="items">
    <div class="item">
            <div class="name">Title Long Long Long Long Long 1</div>
            <div class="desc">Lore Lipsum Lore Lipsum Lore Lipsum Lore Lipsum Lore Lipsum Lore Lipsum</div>
    </div>
    <div class="item">
        <div class="name">Title Long Long Long Long Long 2 </div>
        <div class="desc">Lore Lipsum Lore Lipsum Lore Lipsum Lore Lipsum Lore Lipsum Lore Lipsum</div>
    </div>
</div>

.items {
   width:30%;
}
.item {
  display:table;
}
.item .name ,.item .desc  {
  display:table-cell;
        white-space: nowrap;
    text-overflow: ellipsis;    
    overflow: hidden;   
}
.item .name {
    width:20%;
}
.item .desc {
    width:80%;
}

小提琴链接在这里:演示

为了使其正常工作,我需要设置maxwidth。这将影响响应性元素

.item .desc {
    max-width: 105px;
    width: 80%;
 }
克劳

这里的主要问题是您正在使用table(-*) display格式化元素

表格具有自己的布局算法,其中一个基本组成部分是“使内容显示内容所需的宽度尽可能大”。

如果您不希望这样做,并且无论如何都希望遵守指定的宽度,则需要使用table-layout:fixed最重要的是,您需要在此处指定width:100%您的table元素,否则它们仍然会从有限宽度的容器中流出。

.items {
   width:30%;
}
.item {
  display:table;
  table-layout:fixed; /* added, so that width specifications will be honored */
  width:100%; /* needed so that these tables honor width of parent element */
}
.item .name ,.item .desc  {
  display:table-cell;
  white-space: nowrap;
  text-overflow: ellipsis;    
  overflow: hidden;   
}
.item .name {
  width:20%;
}
.item .desc {
  width:80%;
}
<div class="items">
    <div class="item">
            <div class="name">Title Long Long Long Long Long 1</div>
            <div class="desc">Lore Lipsum Lore Lipsum Lore Lipsum Lore Lipsum Lore Lipsum Lore Lipsum</div>
    </div>
    <div class="item">
        <div class="name">Title Long Long Long Long Long 2 </div>
        <div class="desc">Lore Lipsum Lore Lipsum Lore Lipsum Lore Lipsum Lore Lipsum Lore Lipsum</div>
    </div>
</div>

http://jsfiddle.net/bd3qxrpL/2/

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

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

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

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

来自分类Dev

如果发生溢出,如何设置UITextView的最大高度和固定宽度并强制省略号而不是滚动?

来自分类Dev

文字溢出:IE中的省略号

来自分类Dev

CSS文字省略号和100%宽度

来自分类Dev

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

来自分类Dev

使用div的表格不适用于宽度或文字省略号

来自分类Dev

带省略号的浮动div的CSS-宽度未知

来自分类Dev

当宽度设置为百分比时,CSS省略号不起作用

来自分类Dev

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

来自分类Dev

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

来自分类Dev

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

来自分类Dev

截断省略号,不带宽度

来自分类Dev

文字溢出的样式点:省略号

来自分类Dev

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

来自分类Dev

文字溢出省略号不起作用

来自分类Dev

CSS div自动调整大小到内容,带有最大宽度和省略号文本

来自分类Dev

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

来自分类Dev

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

来自分类Dev

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

来自分类Dev

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

来自分类Dev

如何使用文字溢出:省略号?

来自分类Dev

带省略号的浮动div的CSS-宽度未知

来自分类Dev

宽度设置为百分比时,CSS省略号不起作用

来自分类Dev

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

来自分类Dev

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

来自分类Dev

文字溢出的样式点:省略号

来自分类Dev

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

来自分类Dev

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

来自分类Dev

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

Related 相关文章

  1. 1

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

  2. 2

    如果发生溢出,如何设置UITextView的最大高度和固定宽度并强制省略号而不是滚动?

  3. 3

    文字溢出:IE中的省略号

  4. 4

    CSS文字省略号和100%宽度

  5. 5

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

  6. 6

    使用div的表格不适用于宽度或文字省略号

  7. 7

    带省略号的浮动div的CSS-宽度未知

  8. 8

    当宽度设置为百分比时,CSS省略号不起作用

  9. 9

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

  10. 10

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

  11. 11

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

  12. 12

    截断省略号,不带宽度

  13. 13

    文字溢出的样式点:省略号

  14. 14

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

  15. 15

    文字溢出省略号不起作用

  16. 16

    CSS div自动调整大小到内容,带有最大宽度和省略号文本

  17. 17

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

  18. 18

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

  19. 19

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

  20. 20

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

  21. 21

    如何使用文字溢出:省略号?

  22. 22

    带省略号的浮动div的CSS-宽度未知

  23. 23

    宽度设置为百分比时,CSS省略号不起作用

  24. 24

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

  25. 25

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

  26. 26

    文字溢出的样式点:省略号

  27. 27

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

  28. 28

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

  29. 29

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

热门标签

归档