can text-overflow be used to clip an overflown line instead ofa line's overflown part?
in [CSS]
|
Prev: can text-overflow be used to clip an overflown line instead of a line's overflown part?
Next: Please help with newbie questions
From: Zhang Weiwu on 3 Aug 2010 04:24 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.
From: Gus Richter on 5 Aug 2010 04:34 On 8/2/2010 9:50 PM, Zhang Weiwu 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. > Give the container height:5em; and the row height:1.25em; (1.25 x 4 = 5) -- Gus
From: Gus Richter on 5 Aug 2010 15:35
On 8/5/2010 4:34 AM, Gus Richter wrote: > On 8/2/2010 9:50 PM, Zhang Weiwu 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. >> > > Give the container height:5em; > and the row height:1.25em; > (1.25 x 4 = 5) Sorry, em is my preference, but specifically for you, you can simply add to the row: height:20px; -- Gus |