Skip to content

Commit 57385a6

Browse files
authored
docs: clarify lineClamp display requirements (#782)
## Summary - documents `display: block` and `display: -webkit-box` as accepted display values - clarifies that `lineClamp` currently requires `display: block` - points WebKit-style clamping users to `display: -webkit-box` with `WebkitLineClamp` Closes #778 ## Validation - `npm exec --cache "D:\grand-final prr\.cache\npm-satori" --yes --package prettier@2.7.1 -- prettier --check README.md` - `git diff --check` ## Notes - This is documentation-only. The existing implementation and tests already treat non-block `lineClamp` as unsupported.
1 parent b712d5b commit 57385a6

1 file changed

Lines changed: 2 additions & 2 deletions

File tree

README.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -145,7 +145,7 @@ Satori uses the same Flexbox [layout engine](https://yogalayout.com) as React Na
145145

146146
<tr>
147147
<td colspan="2"><code>display</code></td>
148-
<td><code>flex</code>, <code>contents</code>, <code>none</code>, default to <code>flex</code></td>
148+
<td><code>flex</code>, <code>block</code>, <code>contents</code>, <code>none</code>, <code>-webkit-box</code>, default to <code>flex</code>. Use <code>flex</code>, <code>contents</code>, or <code>none</code> for <code>div</code> elements with multiple child nodes.</td>
149149
<td></td>
150150
</tr>
151151

@@ -300,7 +300,7 @@ Satori uses the same Flexbox [layout engine](https://yogalayout.com) as React Na
300300

301301
<tr>
302302
<td colspan="2"><code>lineClamp</code></td>
303-
<td>Supported</td>
303+
<td>Supported when the text element uses <code>display: block</code>. For WebKit-style clamping, use <code>display: -webkit-box</code> with <code>WebkitLineClamp</code>.</td>
304304
<td><a href="https://og-playground.vercel.app/?share=5VPBbtQwEP2VkRFakNKSshxQBBwoXDhwaEFc9uLYk6xbx2PZk-6G1Up8DR_GlzDOkgr13FtPGb_xvPf8ojkoQxZVo95Zd7cJAJknj-8Ph1IDbNH1W25gdVHXz1fVCdw5y9sHmHU5ej0J2nncL2ipP7mEhh0F6Rny4xCWbtTWutA3cFH_Q1ptbvtEY7CX5CnJxLOu6-7ZKPC1-4kNrF_P0PG4CR9KsZh_aP9_X60nc7tQAXgX8NLrIQrbPTjo1LvwkZhpkJF1HferU69IAcxiAN8zWmgnyDQgUAe8RdhR8naVwQsFZgZDQ9TBYa7gK-75_CYDBt16zDDRCExgEmpG6EbvzzLLy-EHtqBj9M7oElguGjKLocQ0q3iZEPIr1Iahk_kxFQUdLLjA2CcZlKuRdpiEGK7GzGetLn6_6Dt9bZKLLOIkz-8l0DSzdjrPtO3ovM3nc6KvJNJHyHa1ho368-s3vDBihQb5fVayEa-BX27UE093-apKUZxNqeag5v1Szdu6rtRpAVXzphwstmOvmk77jJXCgW7ctymW7eXdfBKesiSfhxatajiNeKwU61ZubNF7mmNUx78">Example</a></td>
305305
</tr>
306306

0 commit comments

Comments
 (0)