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

这里出现偏差的是没有包含在单独元素标签里的“游离文字”。
将它们渲染为匿名 inline 元素（类似于 <span>）似乎没有分歧。**

我们先把它放到默认 inline 的 <span> 标签里，以便通过选择器选择。
楼主也加了高亮背景。

（只测试了 Chrome 27.0.1453.94-m 和 Opera 12.15.1748。下面就爱信不信啦）

首先，由于是流式解析渲染，<input type="text" /> 在游离文字之前，
（假设刚好在它后面网络中断，）浏览器理应先绘制它，并占用一定的宽度（及高度）。

接下来渲染游离文字。

我们先把 white-space: nowrap; 注释掉，大家表现一致，符合 ***-2 的分行渲染要求
（每行右边留下了合适的位置，包括第一行）。

现在让 white-space: nowrap; 重新生效，分歧出现了。

大家都把高亮加到了最右边。似乎是因为 <input> 这个块级元素的存在，同层的 <span>
也（相当于）被套了一层匿名块级框（***-1，不允许同处一层）。

匿名框的属性继承非常少，不应该影响 <span> 内的表现。右边仍然应该留下合适的位置。
但 Opera 在上一步里偷懒，直接把 span 改成了 block！于是里面的文字也不再 inline 了。
所以上一段对高亮的判断有误。Opera 可是急性子。
（验证：添加样式 span {display: block;} 可以使 Chrome 得到同样的结果。）

（Chrome 给人选择的余地。并且就算你不深究细节，它通常也跟你的想象一致。
所以我支持它的大多数渲染策略。）

总结：水平方向上 inline 元素会给 block 元素腾位置。
（水平排版：inline 横着走，竖着展开，block 竖着走，横着展开。[CSS3-writing-modes]）

规范依据：
** 匿名 inline 元素：
[CSS2-visuren] 9.2.2.1: 任何直接包含在块容器元素内（而不是在 inline 元素内）的文字必须作为匿名 inline
元素对待。（[CSS3-box] 4.2 也有等效解释。）

*** 1: 不同层； 2: 自动换行时分行渲染：
[CSS3-box] 4.2.1-1: 块级框只能含有行框（相当于 inline 框）或块级框，但两者不能同时出现。4.2.1-2:
在需要时，框元素内的所有行框会被拆为一或多个（但尽可能少）display: block
的匿名框。（译注：拆分后匿名框内的文字仍继承所处匿名框上级的 display 属性）

参考链接列表：
[CSS2-visuren] http://www.w3.org/TR/CSS2/visuren.html#anonymous

[CSS3-box] http://www.w3.org/TR/css3-box/#block-level0

[CSS3-writing-modes] http://www.w3.org/TR/css3-writing-modes/#vertical-intro


---
Best wishes,
Dean (@xslidian)


On Tue, Jun 4, 2013 at 12:24 PM, 一丝 <yiorsi@gmail.com> wrote:
> 问题源于这个讨论：
> 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 06:47:48 UTC