STR, right now at least: 1. Search for some newsworthy keyword that's likely to get a Google "Top Stories" section in the search results -- e.g. "Ubuntu 23.04" (my actual search term where I ran across this) or "Ukraine" (which also reproduces this for me) 2. Look at the "Top Stories" section, and find some result which has a headline that's more than 3 lines long. If none of them do, use devtools to edit the headline text to add additional words so that it'll be longer than 3 lines. ACTUAL RESULTS: All of the lines of headline are displayed. The 4th line clumsily overlaps the article datestamp (e.g. "2 days ago" or "4 hours ago"). EXPECTED RESULTS: The headline should be clamped at 3 lines. Chrome gives EXPECTED RESULTS. Firefox gives ACTUAL RESULTS. This is a Google bug, where they're sending us different CSS. In Chrome, the headline gets this CSS: ```CSS -webkit-line-clamp:3; display:-webkit-box; -webkit-box-orient:vertical; ``` Firefox supports all of that^ for compatibility, but unfortunately Google doesn't send us that^ CSS. It instead sends us non-standard unprefixed versions: ```CSS line-clamp:3; display:box; box-orient:vertical; ``` See attached screenshot. So that's why we don't clamp. We should ask that Google send us the same 3 lines of CSS that they send to Chrome for this line-clamping functionality here. If I manually edit the page in devtools to add `-webkit` prefixes, then we do clamp properly.
Bug 1829518 Comment 0 Edit History
Note: The actual edited comment in the bug view page will always show the original commenter’s name and original timestamp.
STR, right now at least: 1. Search for some newsworthy keyword that's likely to get a Google "Top Stories" section in the search results -- e.g. "Ubuntu 23.04" (my actual search term where I ran across this) or "Ukraine" (which also reproduces this for me) 2. Look at the "Top Stories" section, and find some result which has a headline that's more than 3 lines long. If none of them do, use devtools to edit the headline text to add additional words so that it'll be longer than 3 lines. ACTUAL RESULTS: All of the lines of headline are displayed. The 4th line clumsily overlaps the article datestamp (e.g. "2 days ago" or "4 hours ago"). EXPECTED RESULTS: The headline should be clamped at 3 lines. Chrome gives EXPECTED RESULTS. Firefox gives ACTUAL RESULTS. This is a Google bug, where they're sending us different CSS. In Chrome, the headline gets this CSS: ```CSS -webkit-line-clamp:3; display:-webkit-box; -webkit-box-orient:vertical; ``` Firefox supports all of that^ for compatibility, but unfortunately Google doesn't send us that^ CSS. It instead sends us non-standard unprefixed versions: ```CSS line-clamp:3; display:box; box-orient:vertical; ``` See attached screenshot. So that's why we don't clamp. We should ask that Google send us the same 3 lines of CSS that they send to Chrome for this line-clamping functionality here. If I manually edit the page in devtools to add `-webkit` prefixes to those 3 lines, then we do clamp properly.