Typography ​

注意：Emmet 不支持中括号

Text Align ​

参考 Github Markdown Extension 表格语法，实现文本对齐。

ClassCSS
[:-]text-align: start
[--]text-align: center
[-:]text-align: end
html
<div class="[:-]">[:-]</div>
<div class="[--]">[--]</div>
<div class="[-:]">[-:]</div>
[:-]
[--]
[-:]

Text Overflow ​

ClassCSS
[...]overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
html
<div class="mini">
  <div>Lorem ipsum.</div>
  <div class="[...] 🦄">Lorem ipsum.</div>
</div>
Lorem ipsum.
Lorem ipsum.

需要括号的一个原因是因为直接打点会触发 volar css 代码提示。

确保目标是块容器才能设置 overflow 属性。

CSS overflow Applies to Block-containers, flex containers, and grid containers.

The Automatic Minimum Size of Flex Items ​

Flex Items 和 Grid Items 默认的 min-width:auto、 min-height:auto 等同于 min-content 而不是标准的 0，这会导致一些情况溢出。

它们并非和已有的流式布局的设计冲突，因为是这两种布局的出现才有真正意义的横向布局，这是流式布局的百分比宽度栅格所不可比拟的。

To provide a more reasonable default minimum size for flex items, the used value of a main axis automatic minimum size on a flex item that is not a scroll container is a content-based minimum size; for scroll containers the automatic minimum size is zero, as usual.

Why don't flex items shrink past content size?

https://www.w3.org/TR/css-flexbox-1/#min-size-auto

注： scroll container 即 overflow: hidden | scroll | auto，包括 hidden

hidden: the box is therefore still a scroll container.

可能溢出的情况包括单个字符过大，过长文本，替换元素(<input size="500">)。
  • <input size="500"> 在流式布局下也会溢出其包含块。
  • <input size="500" style="max-width: 100%"> 在流式布局下不会溢出其包含块，在嵌套的 flexbox item 里则会溢出其包含块。显式设置包含块的 min-width: 0 后显示正常。
  • <img> (默认样式 max-width: auto) 在流式布局下也会溢出其包含块。故 strawberry-farm 的 CSS 重置引用了主流实现即设置为 max-width: 100%。
  • <img style="max-width: 100%"> 在流式布局下不会溢出其包含块，在嵌套的 flexbox item 里也不会溢出其包含块。

下例第二项展示了 flexbox 在嵌套 <div> 而溢出的现象，可以看到我们的类名[...]失效了：

html
<div class="[B] mini">
  <div class="[...] 🍒">Text Overflow</div>
</div>
<div class="[B] mini">
  <div>
    <div class="[...] 🍒">Text Overflow</div>
  </div>
</div>
<div class="[B] mini">
  <input />
</div>
<div class="[B] mini">
  <div>
    <input />
  </div>
</div>
Text Overflow
Text Overflow

显式设置了 Flex Item min-width: 0 / max-width: 100% 或 overflow: hidden 后不再溢出：

html
<div class="[B] mini">
  <div style="min-width: 0">
    <div class="[...] 🍒">Text Overflow</div>
  </div>
</div>
<div class="[B] mini">
  <div style="overflow: hidden">
    <div class="[...] 🍒">Text Overflow</div>
  </div>
</div>
<div class="[B] mini">
  <input style="min-width: 0" />
</div>
<div class="[B] mini">
  <div style="min-width: 0">
    <input style="max-width: 100%" />
  </div>
</div>
Text Overflow
Text Overflow

下例展示了 grid 子元素的溢出现象，justify-self 会使得宽高被设置为 fit-content，解决方法是设置max-width: 100% width: 100%而并非上文的 min-width: 0 或 overflow: hidden：

这个设定反映了现代 CSS 各属性仍然不够正交的毛病。

Values other than stretch cause a width/height of auto to be treated as fit-content. https://www.w3.org/TR/css-align-3/#propdef-justify-self

在 Grid Layout 中，100% 代表其所在格子的宽度。

Percentages are resolved against the width/height, as appropriate, of the box’s containing block.

https://www.w3.org/TR/css-sizing-3/#sizing-values

A grid item is sized within the containing block defined by its grid area.

https://www.w3.org/TR/css-grid-1/#grid-item-sizing

html
<div style="display: grid; grid-template-columns: 3fr 1fr; width: 50px;">
  <div class="[...] 🍒">Text Overflow</div>
  <div>A</div>
</div>
<div style="display: grid; grid-template-columns: 3fr 1fr; width: 50px;">
  <div class="[...] 🍒" style="justify-self: start;">Text Overflow</div>
  <div>A</div>
</div>
<div style="display: grid; grid-template-columns: 3fr 1fr; width: 50px;">
  <div class="[...] 🍒" style="justify-self: start; max-width: 100%;">
    Text Overflow
  </div>
  <div>A</div>
</div>
Text Overflow
A
Text Overflow
A
Text Overflow
A