<html> <head> <style> div { overflow: hidden; white-space: nowrap; } input { float: right; } </style> </head> <body> <div> <input type="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis</div> </body> </html> <div> with 'text-overflow: ellipsis;' renders the ellipsis to the left edge of the floating inline element, while with 'text-overflow:: clip' the text is clipped at the right edge of the containing block, overdrawing the input. 'text-overflow: clip' should respect the floating element.
Created attachment 199830 [details] text-overflow:clip
<rdar://problem/13747959>
Created attachment 459987 [details] rendering in safari, firefox, chrome data:text/html,<!doctype%20html><div%20style="text-overflow:ellipsis;overflow:hidden;white-space:nowrap;width:30ch;"><input%20type="text"%20style="width:5ch;background-color:%20gold;float:right;"%20value="ABCD">012345678901234567890123456789</div>
Created attachment 459988 [details] rendering in safari, firefox, chrome with clip And this time with clip instead of ellipsis data:text/html,<!doctype%20html><div%20style="text-overflow:clip;overflow:hidden;white-space:nowrap;width:30ch;"><input%20type="text"%20style="width:5ch;background-color:%20gold;float:right;"%20value="ABCD">012345678901234567890123456789</div>
Created attachment 459990 [details] test with ellipsis and clip
See comment in https://bugs.webkit.org/show_bug.cgi?id=115462#c2