can text-overflow be used to clip an overflown line instead of a line's overflown part?
in [CSS]
|
Prev: can text-overflow be used to clip an overflown line instead of aline's overflown part?
Next: can text-overflow be used to clip an overflown line instead ofa line's overflown part?
From: dorayme on 2 Aug 2010 22:11 In article <0CK5o.56190$YX3.55656(a)newsfe18.iad>, Zhang Weiwu <zhangweiwu+Junk(a)realss.com> wrote: > 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. Try ..container { width: 200px; height: 80px; } -- dorayme
From: dorayme on 3 Aug 2010 05:14
In article <SmQ5o.52431$lS1.4636(a)newsfe12.iad>, Zhang Weiwu <zhangweiwu+Junk(a)realss.com> wrote: > On 2010年08月03日 10:11, dorayme wrote: > > Try > > > > .container { > > width: 200px; > > height: 80px; > > } > > > This makes the container in fact taller than 200px, breaking the > graphical design. Putting a height of 80px on an element makes the element more than 200px? -- dorayme |