首页 新闻 赞助 找找看

css文字单行溢出显示省略号显示不全的问题

3
悬赏园豆:100 [已解决问题] 解决于 2014-11-19 10:27

目前在做css文字单行溢出显示省略号的问题,但是发现在小语种中(如维语),在显示一些内容时,css属性不能在最后面完全显示三个省略号,有时候是两个,有时候是三个。谁知道怎么解决这个问题啊???

CSS
问题补充:

使用的css属性:

white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100px;

后台的想法大家就不用提了,目前的解决只能围绕前端:(

 

【我通过追加一个css属性:padding-left:1em初步解决了这个问题,不知道大家对这个方法有没有什么想法?????】

前端荣耀的主页 前端荣耀 | 初学一级 | 园豆:112
提问于:2014-11-06 10:46
< >
分享
最佳答案
0

可以让后台来控制显示的字数来试试看

收获园豆:100
豫见陈公子 | 菜鸟二级 |园豆:308 | 2014-11-06 13:15

这个我们目前没法控制后台,这条道路完全不通。。。

前端荣耀 | 园豆:112 (初学一级) | 2014-11-06 15:01

@冷星寒雨: 那就没办法了  因为小语种跟英文或中文的不太一样,从它的单个词的那种长度和写法上就能想到会有这样的结局   唉~

豫见陈公子 | 园豆:308 (菜鸟二级) | 2014-11-06 15:04

@沪/前端-小坏: 谁说不是呢

PS:了解不了解text-overflow:ellipsis;实现显示省略号的原理啊,很好奇是怎么实现的

前端荣耀 | 园豆:112 (初学一级) | 2014-11-06 15:17

@冷星寒雨: 不了解哇

豫见陈公子 | 园豆:308 (菜鸟二级) | 2014-11-06 15:20

@冷星寒雨: 能解决就是好办法 

豫见陈公子 | 园豆:308 (菜鸟二级) | 2014-11-07 15:27

@沪/前端-小坏: 我是想知道,为什么能解决这个问题,这个属性是我一顿实验试出来的

前端荣耀 | 园豆:112 (初学一级) | 2014-11-07 15:29

@冷星寒雨: 这个很明显嘛,你设置了左边内边距padding-left,所以小语种的单个词语在一定程度上被隐藏了一些,然后就给省略号又多留出了一些空间,所以它就完全显示出来了

豫见陈公子 | 园豆:308 (菜鸟二级) | 2014-11-07 15:32

@沪/前端-小坏: 你的意思是,我设定的这个padding-left,并不是影响省略号,而是影响的这个dom元素中显示的文字内容的区域,将显示文字内容的区域“挤”小了,从而将被“挤”出去的省略号有了显示的空间。

是不是可以这么理解呢?

另外,我的这种方法不知道是不是能够解决所有会出现“省略号显示不全”的情况呢?帮忙分析一下呗

前端荣耀 | 园豆:112 (初学一级) | 2014-11-07 16:42

@冷星寒雨: 你可以这么理解,比如英文字母I和M,很明显I所占据的宽度比M小(I设置2像素宽估计就可以了,但是M估计就得设置4像素了),所以,比如当你设置了固定宽度6像素以及溢出部分用省略号代替时,如果文本内容是I,则省略号的三个点会全部显示,如果是M,那么估计就只会显示两个点了。

豫见陈公子 | 园豆:308 (菜鸟二级) | 2014-11-07 16:50

@沪/前端-小坏: 谢谢哈,以后还望多多指教啊

前端荣耀 | 园豆:112 (初学一级) | 2014-11-07 18:02
其他回答(2)
0

将 text-overflow: ellipsis 换成 text-overflow: "…" 试试

dudu | 园豆:31075 (高人七级) | 2014-11-06 10:53

这个属性目前在浏览器中还不支持呢。。。。

支持(0) 反对(0) 前端荣耀 | 园豆:112 (初学一级) | 2014-11-06 11:01

@冷星寒雨: html的DOCTYPE是怎么写的?

支持(0) 反对(0) dudu | 园豆:31075 (高人七级) | 2014-11-06 11:08

@dudu: <!DOCTYPE html>

支持(0) 反对(0) 前端荣耀 | 园豆:112 (初学一级) | 2014-11-06 11:10

@冷星寒雨: 原来只有Firefox支持text-overflow: "…"这种方式

支持(0) 反对(0) dudu | 园豆:31075 (高人七级) | 2014-11-06 11:19

@dudu: 额。。。很纠结这个,这个应该是浏览器在截取单词时的处理的问题,但是不知道它的原理。

并且这类小语种的字符串的截取和内容以及字体大小都有关系。。。。纠结死了。。。。

支持(0) 反对(0) 前端荣耀 | 园豆:112 (初学一级) | 2014-11-06 11:25

@冷星寒雨: 试试在服务端截取并加上...

支持(0) 反对(0) dudu | 园豆:31075 (高人七级) | 2014-11-06 11:29

@dudu: 我获得的字符串,完全都是随机的,而且不是根据字符数,只是根据html中元素的宽度来显示的。你的这个建议在我这没有办法尝试的。

 

小语种害死人啊

支持(0) 反对(0) 前端荣耀 | 园豆:112 (初学一级) | 2014-11-06 11:32

@dudu: PS:了解不了解text-overflow:ellipsis;实现显示省略号的原理啊,很好奇是怎么实现的

支持(0) 反对(0) 前端荣耀 | 园豆:112 (初学一级) | 2014-11-06 15:17
0

你的 … 应该是在前面啊。 维语排版超级郁闷了。

myx | 园豆:204 (菜鸟二级) | 2014-11-06 15:56

好吧,我对维语完全不了解。。。。

支持(0) 反对(0) 前端荣耀 | 园豆:112 (初学一级) | 2014-11-06 16:20

我注重的是省略号显示的问题,而不是维语的排版问题⊙﹏⊙b汗

支持(0) 反对(0) 前端荣耀 | 园豆:112 (初学一级) | 2014-11-06 16:20
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册