W3C home > Mailing lists > Public > www-style@w3.org > June 2013

Re: [css3-text-overflow] Question regarding float and text-overflow: ellipsis(float 和 text-overflow: ellipsis 的问题)

From: hanquan.csf <hanquan.csf@taobao.com>
Date: Tue, 04 Jun 2013 13:27:18 +0800
To: 一丝 <yiorsi@gmail.com>, public-html-ig-zh <public-html-ig-zh@w3.org>, "www-style@w3.org" <www-style@w3.org>, "Tab Atkins Jr." <jackalmage@gmail.com>
Message-ID: <CDD399D3.989A%hanquan.csf@taobao.com>
刚刚跟一丝旺旺上讨论过,符合标准的肯定是文字遮盖 input,标准上说:

This property specifies rendering when inline content overflows its block
container element.

因为float元素只影响line box,所以text-overflow这属性跟float就完全无关了。

然而我是认为这个设定相当有问题,从符合直觉的角度,一切文字都盛装在line box里
面,它的排版行为也基本都是和line box相关的,这里跳过line box莫名奇妙地去找外层
的block container,实在是非常诡异,而且我相信从应用场景上,也不会有人想要这
种float和文字重叠的排版,这样的use case根本就不存在。

所以我想更好的做法是调整整个text-overflow的策略,让它变成基于line box去描述的。


/寒泉(winter在公司的花名)

发件人:  一丝 <yiorsi@gmail.com>
日期:  2013年6月4日星期二 下午12:24
至:  public-html-ig-zh <public-html-ig-zh@w3.org>, "www-style@w3.org"
<www-style@w3.org>, "Tab Atkins Jr." <jackalmage@gmail.com>
主题:  [css3-text-overflow] Question regarding float and text-overflow:
ellipsis(float 和 text-overflow: ellipsis 的问题)
重发发件人:  <public-html-ig-zh@w3.org>
重发日期:  Tue, 4 Jun 2013 04:25:07 +0000

问题源于这个讨论:
http://lists.w3.org/Archives/Public/www-style/2013Apr/0540.html

我写了一个测试用例:http://jsbin.com/afuxid/1/edit

得到如下结果:

http://img02.taobaocdn.com/tps/i2/T1rgC1XANbXXbAUXjT-270-405.png

其中:
Chrome,IE8-10 表现一致,文字不遮盖 input;
Opera 与 Firefox 表现一致,文字遮盖 input;
Firefox 21 在 input 获得焦点后省略号消失。

Webkit bug:https://bugs.webkit.org/show_bug.cgi?id=115746
Chromium bug:https://code.google.com/p/chromium/issues/detail?id=237078
Firefox bug:https://bugzilla.mozilla.org/show_bug.cgi?id=864759

那么到底哪一种才是符合标准的?
text-overflow 规范:http://dev.w3.org/csswg/css-ui/#text-overflow0

以上
一丝
Received on Tuesday, 4 June 2013 07:17:37 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:39:12 UTC