diff --git a/src/content/blog/2024-12-06-overflow-clip-for-line-clamp.mdx b/src/content/blog/2024-12-06-overflow-clip-for-line-clamp.mdx
new file mode 100644
index 0000000..9502b8c
--- /dev/null
+++ b/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;
+}
+```
+
+
+
+しかし、`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;
+}
+```
+
+
+
+`-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;
+}
+```
+
+
+
+この問題を解決するのが、`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;
+}
+```
+
+
+
+`hanging-punctuation`プロパティにかぎらず、横方向にコンテンツのはみ出しが発生する場面においては有効だろう。
diff --git a/src/content/blog/assets/2024-12-06-overflow-clip-for-line-clamp/1.png b/src/content/blog/assets/2024-12-06-overflow-clip-for-line-clamp/1.png
new file mode 100644
index 0000000..c2975fa
Binary files /dev/null and b/src/content/blog/assets/2024-12-06-overflow-clip-for-line-clamp/1.png differ
diff --git a/src/content/blog/assets/2024-12-06-overflow-clip-for-line-clamp/2.png b/src/content/blog/assets/2024-12-06-overflow-clip-for-line-clamp/2.png
new file mode 100644
index 0000000..a4df88f
Binary files /dev/null and b/src/content/blog/assets/2024-12-06-overflow-clip-for-line-clamp/2.png differ
diff --git a/src/content/blog/assets/2024-12-06-overflow-clip-for-line-clamp/3.png b/src/content/blog/assets/2024-12-06-overflow-clip-for-line-clamp/3.png
new file mode 100644
index 0000000..1ba267a
Binary files /dev/null and b/src/content/blog/assets/2024-12-06-overflow-clip-for-line-clamp/3.png differ
diff --git a/src/content/blog/assets/2024-12-06-overflow-clip-for-line-clamp/4.png b/src/content/blog/assets/2024-12-06-overflow-clip-for-line-clamp/4.png
new file mode 100644
index 0000000..2adf23e
Binary files /dev/null and b/src/content/blog/assets/2024-12-06-overflow-clip-for-line-clamp/4.png differ