can text-overflow be used to clip an overflown line instead of aline's overflown part?
in [CSS]
|
Prev: missing part of view-source in Chrome but not in I.E. 7?
Next: can text-overflow be used to clip an overflown line instead of a line's overflown part?
From: Zhang Weiwu on 2 Aug 2010 21:50 The problem is demonstrated in the following code, it tries to apply text-overflow: ellipsis to lines that flow rightwards outside the container, and succeeded. It then tried to apply text-overflow-ellipsis to lines that flow downwards outside the container, and failed. With IE, the last line in the container currently is clipped into half, the upper half is visible, but I need it to be either fully visible or not appear at all. Is there a CSS way so that this can be done? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="text/css"> ..container { width: 200px; height: 80px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } ..row { width: 100%; overflow: hidden; white-space:nowrap; text-overflow: ellipsis; } </style> </head> <body> <div class="container"> <div class="row">The quick brown fox jumps over a lazy dog.</div> <div class="row">The quick brown fox jumps over a lazy dog.</div> <div class="row">The quick brown fox jumps over a lazy dog.</div> <div class="row">The quick brown fox jumps over a lazy dog.</div> <div class="row">The quick brown fox jumps over a lazy dog.</div> </div> </body> Thanks in advance! By the way I am aware text-overflow is not W3C finalized yet. I just want to practically achieve this on browser that supports this attribute. |