Peter-Paul 发布了此问题
您认为图片中的哪个示例是正确的?
如果您精通 CSS,请勿回复,只需转发即可。
如果您不太了解 CSS,请回复下一条推文中的投票。 pic.twitter.com/4bgnf9Wdkc
— ppk 🇪🇺 (@ppk) 2019年6月17日
请注意有趣的警告:只有在您 *不* 了解 CSS 的情况下才能参与投票。
获胜答案是 **D**! 您必须想知道,如果不存在针对非 CSS 专家用户的请求,结果是否会有所不同。
我认为我对 CSS 还算了解,所以我没有投票。我的大脑是这样思考的
- 我认为他是在问“默认情况下”,因此答案可能假设没有其他 CSS 对该文本进行任何操作。
- 我希望我 *知道* 该框为何具有特定宽度,但我想我会假设它是一个设置的
width
。 - 它不是 **B**,因为省略号内容 需要额外的操作,并且不适用于多行,除非我们谈论的是 行裁剪,这更加奇怪。
- 它不是 **C**,因为这需要隐藏溢出,而溢出从来都不是真正的默认值,也就是说,除了浏览器窗口的顶部和左侧之外,我想。或者在 iframe 中。
- 它不是 **D**,因为单词不会像那样断开,除非您执行 非常具体的操作。
- **A** 实际上很有道理。它看起来很奇怪,但我整个职业生涯都在处理超出容器的内容。C’est la vie.
请记住,我们之前深入探讨过 CSS IS AWESOME,以及它如何以有趣的方式捕捉 CSS 的怪异之处。
我认为这源于一种信念,即该框是一个页面,并且文本在遇到边界时应该换行。
当我看到帖子时,我就知道正确的答案会是“A”,因为……这是我们都遇到过的常见 CSS 问题。但当我看到 Peter-Paul 正在向没有 CSS 经验的人征求答案时,我内心深处知道他们会压倒性地选择“D”。
这是一个有趣的实验……
用户(没有 CSS 经验的人)假设该框会以包含文本到其框架的方式组织文本。这是他们在不了解这不是默认行为的情况下所期望的。
这让我想知道……他们是否期望这样,因为我们作为设计师教会了他们内容应该以这种方式呈现,或者由于其他一些影响因素导致这种显示方式最“合理”。
并且……如果这种行为是预期的默认行为……为什么 CSS 的默认行为不是这样?
默认情况下,CSS 永远不会隐藏任何内容。因为如果您隐藏某些内容,您可能不会注意到某些内容丢失了。与未重叠但被隐藏的文本相比,更容易发现重叠的文本。更容易发现奇怪位置的框,而不是发现该框消失在另一个框后面。对于编写规范和实现 CSS 的人员来说,这是一个基本规则。
我认为没有令人信服的论点表明它应该以这种方式换行。想想其他将文本放入框中并换行的软件。Word、InDesign、Photoshop、Excel。它们都允许您执行此操作,但很少有软件 *默认* 这样做。在它们确实这样做的地方,您可能通常会修复它……
因为那不是可读的排版。这不是您通常用于生产的方式。在应该保持在一起的单词中间断开实际上是对文本超出空间范围的一种天真的解决方案,这是一个设计需要解决的问题,而不仅仅是像 D 尝试的那样一笔带过。
如果您询问为什么盒尺寸和文字换行从一开始就没有更智能,您的问题就暗示了您的答案。这是一个复杂的自动化问题空间,尤其是在国际上。没有一个万能的答案。Word 的早期版本也没有孤行控制或悬挂缩进或智能连字符。而且 Word 尽管很复杂,但功能远不及网络。
您能做的最好的事情就是将更直接的控制权交给设计师,以便他们可以在特定上下文中执行适当的操作。网络一直都在这样做,我希望它会继续这样做,无论多少代新手最初都没有意识到这一点。
“A”是笑话……因为 CSS 对初学者来说很难/难以理解。(或者仅仅是因为即使对于老手来说,有时也会出现这样的问题。)
“B”只有在手机或非常小的浏览器窗口上且没有任何 CSS 的情况下才会是默认值。
“A”演示了有人获取了一个框并为其指定了宽度,但在某个地方弄错了。(或者客户说“让它变得这么宽,并在其中容纳太多文本”)