文字溢出:IE中的省略号

尼古拉

text-overflow: ellipsis;在IE中使用时,我遇到两个长字的问题:

在Chrome中,它看起来像:

firstlongword1 ...

secondlongword2 ...

在IE中:

firstlongword1 ...

secondlongword2 //裁切了单词,但是没有点

HTML和CSS:

.orange {
    color: #f58026;
    text-overflow: ellipsis;
    display: block;
    overflow: hidden;
}
<span class="orange" title="12 12">first_verylongworddddddddddddddddddddddddddddddddddddddddddd second_verylonglonglonglonglonglonglonglonglonglong</span>

如果有人遇到问题,请帮助。或者如果有其他解决方法,请告诉我。

隐藏的爱好

检查CSS规范后,Chrome(和Firefox)似乎正确显示了省略号,即IE,似乎已经落后了。转至http://www.w3.org/TR/css3-ui/#text-overflow0并向下滚动至示例9,以查看有关text-overflow:ellipsis;如何呈现的演示

因此,似乎在IE中获得类似结果的唯一方法是将单词包装在自己的元素中:

.orange {
    color: #f58026;
    display: block;
    text-overflow: ellipsis;
}
.orange span {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
<span class="orange" title="12 12">
    <span>first_verylongworddddddddddddddddddddddddddddddddddddddddddd</span> 
    <span>second_verylonglonglonglonglonglonglonglonglonglong</span>
</span>

JS小提琴: http //jsfiddle.net/fL6za37f/2/

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

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

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

设置“文本溢出:省略号”的点颜色

来自分类Dev

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

来自分类Dev

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

来自分类Dev

Flexbox和文本溢出:省略号混合使用吗?

来自分类Dev

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

来自分类Dev

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

来自分类Dev

带省略号的段落溢出

来自分类Dev

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

来自分类Dev

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

来自分类Dev

如何从文本溢出中删除三个点:省略号?

来自分类Dev

省略项中的省略号省略

来自分类Dev

为什么我的文字溢出:省略号;没有工作吗?

来自分类Dev

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

来自分类Dev

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

来自分类Dev

文字溢出省略号不起作用

来自分类Dev

文本溢出:省略号在嵌套的flex容器中不起作用

来自分类Dev

文字溢出:省略号在有限的显示行中不起作用

来自分类Dev

CSS文字溢出:省略号在V-chip上不起作用

来自分类Dev

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

来自分类Dev

如何在AntDesign的Table组件中添加省略号以溢出文本?

来自分类Dev

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

来自分类Dev

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

来自分类Dev

如何在CSS中的省略号文本溢出旁边(右侧)添加文本?

来自分类Dev

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

来自分类Dev

为什么我的文字溢出:省略号;没有工作吗?

来自分类Dev

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

来自分类Dev

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

来自分类Dev

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

来自分类Dev

使用 vue-material,如何让文本换行而不是溢出到列表中的省略号?

Related 相关文章

  1. 1

    设置“文本溢出:省略号”的点颜色

  2. 2

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

  3. 3

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

  4. 4

    Flexbox和文本溢出:省略号混合使用吗?

  5. 5

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

  6. 6

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

  7. 7

    带省略号的段落溢出

  8. 8

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

  9. 9

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

  10. 10

    如何从文本溢出中删除三个点:省略号?

  11. 11

    省略项中的省略号省略

  12. 12

    为什么我的文字溢出:省略号;没有工作吗?

  13. 13

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

  14. 14

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

  15. 15

    文字溢出省略号不起作用

  16. 16

    文本溢出:省略号在嵌套的flex容器中不起作用

  17. 17

    文字溢出:省略号在有限的显示行中不起作用

  18. 18

    CSS文字溢出:省略号在V-chip上不起作用

  19. 19

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

  20. 20

    如何在AntDesign的Table组件中添加省略号以溢出文本?

  21. 21

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

  22. 22

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

  23. 23

    如何在CSS中的省略号文本溢出旁边(右侧)添加文本?

  24. 24

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

  25. 25

    为什么我的文字溢出:省略号;没有工作吗?

  26. 26

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

  27. 27

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

  28. 28

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

  29. 29

    使用 vue-material,如何让文本换行而不是溢出到列表中的省略号?

热门标签

归档