Text-box trim

CSS text-box-trim × text-box-edge matrix.

Sample text

Combinations of text-box-trim and text-box-edge applied to the sample text
text-box-trim ↓ text-box-edge →	auto Browser default	text Text bounds	text text Text bounds both	text alphabetic Text top, baseline bottom	cap alphabetic Cap height top, baseline bottom	ex text X-height top, text bottom
none No trimming	trim: none edge: auto Hello Google.	trim: none edge: text Hello Google.	trim: none edge: text text Hello Google.	trim: none edge: text alphabetic Hello Google.	trim: none edge: cap alphabetic Hello Google.	trim: none edge: ex text Hello Google.
trim-both Trim top & bottom	trim: trim-both edge: auto Hello Google.	trim: trim-both edge: text Hello Google.	trim: trim-both edge: text text Hello Google.	trim: trim-both edge: text alphabetic Hello Google.	trim: trim-both edge: cap alphabetic Hello Google.	trim: trim-both edge: ex text Hello Google.
trim-start Trim top only	trim: trim-start edge: auto Hello Google.	trim: trim-start edge: text Hello Google.	trim: trim-start edge: text text Hello Google.	trim: trim-start edge: text alphabetic Hello Google.	trim: trim-start edge: cap alphabetic Hello Google.	trim: trim-start edge: ex text Hello Google.
trim-end Trim bottom only	trim: trim-end edge: auto Hello Google.	trim: trim-end edge: text Hello Google.	trim: trim-end edge: text text Hello Google.	trim: trim-end edge: text alphabetic Hello Google.	trim: trim-end edge: cap alphabetic Hello Google.	trim: trim-end edge: ex text Hello Google.

Experimental CSS with limited browser support — visual differences may not appear in most current browsers.