publish 2024-12-06-overflow-clip-for-line-clamp

src/content/blog/2024-12-06-overflow-clip-for-line-clamp.mdx

@@ -0,0 +1,65 @@
+---
+title: 'line-clampとhanging-punctuationを併用するときはoverflow:hiddenの代わりにclipを使う'
+pubDate: 2024-12-06T00:40:00.000+09:00
+---
+
+CSSの`-webkit-line-clamp`プロパティを使うとき、通常は`overflow: hidden`を併用することが多い。
+
+```css
+p {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  width: 5.2em;
+  overflow: hidden;
+}
+```
+
+<figure>![](./assets/2024-12-06-overflow-clip-for-line-clamp/1.png)</figure>
+
+しかし、`hanging-punctuation`プロパティを併用する場合、`overflow: hidden`が指定されているとはみ出した役物が見切れてしまう。
+
+```css
+p {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  width: 5.2em;
+  overflow: hidden;
+  hanging-punctuation: allow-end;
+}
+```
+
+<figure>![](./assets/2024-12-06-overflow-clip-for-line-clamp/2.png)</figure>
+
+`-webkit-line-clamp`プロパティを機能させるには、通常は`overflow-y`プロパティを使うだけで十分だ。ただし、`overflow-y: hidden`を指定すると、自ずと横方向にスクロール可能な状態になってしまう。
+
+```css
+p {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  width: 5.2em;
+  overflow-y: hidden;
+  hanging-punctuation: allow-end;
+}
+```
+
+<figure>![](./assets/2024-12-06-overflow-clip-for-line-clamp/3.png)</figure>
+
+この問題を解決するのが、`clip`である。`clip`を使うと、単方向の切り取りを実現しつつ、もう一方の方向はスクロール不能な状態のままにできる。
+
+```css
+p {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  width: 5.2em;
+  overflow-y: clip;
+  hanging-punctuation: allow-end;
+}
+```
+
+<figure>![](./assets/2024-12-06-overflow-clip-for-line-clamp/4.png)</figure>
+
+`hanging-punctuation`プロパティにかぎらず、横方向にコンテンツのはみ出しが発生する場面においては有用だろう。