Re: [WSG] Using ellipsis to indicate truncated overflow content

[Oliver Boermans]

You could possibly use JavaScript to implement it in browsers that don’t 
support it.
I’ve seen a few jQuery plugins written for the purpose. For example:
http://dotdotdot.frebsite.nl/

I’ve not used it myself.
HTH
Ollie

On 23/11/2011, at 4:13 PM, Ben Buchanan  wrote:

>>> text-overflow: ellipsis?
>>> http://www.quirksmode.org/css/textoverflow.html
>> Thank you, yes, the text-overflow property is great but does not work in
>> Firefox 3.6. Do you know of a work-around for Firefox.
> 
> Unless you have a really massive FF 3.6 userbase that you know is
> blocked from upgrades, I'd say use it anyway.
> 
> People regularly use things that don't work in IE - it doesn't stop
> being Progressive Enhancement just because Firefox was the weakest
> link in this case :)
> 
> cheers,
> Ben
> 
> -- 
> --- 
> --- The future has arrived; it's just not
> --- evenly distributed. - William Gibson
> 
> 
> ***
> List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
> Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
> Help: memberh...@webstandardsgroup.org
> ***
> 


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***

Re: [WSG] Using ellipsis to indicate truncated overflow content

[Ben Buchanan]

>> text-overflow: ellipsis?
>> http://www.quirksmode.org/css/textoverflow.html
> Thank you, yes, the text-overflow property is great but does not work in
> Firefox 3.6. Do you know of a work-around for Firefox.

Unless you have a really massive FF 3.6 userbase that you know is
blocked from upgrades, I'd say use it anyway.

People regularly use things that don't work in IE - it doesn't stop
being Progressive Enhancement just because Firefox was the weakest
link in this case :)

cheers,
Ben

-- 
--- 
--- The future has arrived; it's just not
--- evenly distributed. - William Gibson


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***

Re: [WSG] Using ellipsis to indicate truncated overflow content

[Grant Bailey]

David,

Thank you for your reply.

I think you mean page layout - I was asking about tables for data. I've 
since been able to muddle through.


Regards,

Grant

On 15/11/2011 7:42 PM, David Laakso wrote:

On 11/15/11 12:49 AM, Grant Bailey wrote:


Is anyone able to offer suggestions as to how demonstrate to the user 
that overflow content has been truncated, like this (see attachment).




Grant Bailey





I guess the question for me is whether I understand the question???

Set width in %, min-width in pixels, and max-width in em on the 
outermost page wrapper. Avoid use of position absolute and position 
fixed. Set the page blocks in  percent. Set p with margin left/right 
in percent and margin top/bottom in em or pixels. That will give you 
desktop. high d pi laptop, and both tablets [ horiz 1024 and vertical 
768].


For mobile handsets you need to add a device width meta-tag. Kick the 
first media query in at around 560 and then another at 480 -- this 
will give you vertical and horizontal iPhone as well as low through 
high end Android. If you need to hit IE/6 then it needs to be hacked 
for doubling the margins and doing weird stuff to the height such as 
with vertical lists.


A rough layout using these principles: 



Best,
~d




***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***

Re: [WSG] Using ellipsis to indicate truncated overflow content

[David Laakso]

On 11/15/11 12:49 AM, Grant Bailey wrote:


Is anyone able to offer suggestions as to how demonstrate to the user 
that overflow content has been truncated, like this (see attachment).




Grant Bailey





I guess the question for me is whether I understand the question???

Set width in %, min-width in pixels, and max-width in em on the 
outermost page wrapper. Avoid use of position absolute and position 
fixed. Set the page blocks in  percent. Set p with margin left/right in 
percent and margin top/bottom in em or pixels. That will give you 
desktop. high d pi laptop, and both tablets [ horiz 1024 and vertical 768].


For mobile handsets you need to add a device width meta-tag. Kick the 
first media query in at around 560 and then another at 480 -- this will 
give you vertical and horizontal iPhone as well as low through high end 
Android. If you need to hit IE/6 then it needs to be hacked for doubling 
the margins and doing weird stuff to the height such as with vertical lists.


A rough layout using these principles: 



Best,
~d

--
Desktop. Laptop. Tablet. Mobile!
http://chelseacreekstudio.com/



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***

Re: [WSG] Using ellipsis to indicate truncated overflow content

[Grant Bailey]

Matthew,

Thank you, yes, the text-overflow property is great but does not work in 
Firefox 3.6. Do you know of a work-around for Firefox.


Many thanks,

Grant Bailey

On 15/11/2011 4:56 PM, Matthew Pennell wrote:

On Tue, Nov 15, 2011 at 6:49 AM, Grant Bailey
  wrote:

Is anyone able to offer suggestions as to how demonstrate to the user that
overflow content has been truncated, like this (see attachment).

text-overflow: ellipsis?

http://www.quirksmode.org/css/textoverflow.html

- Matthew


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***




***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***

Re: [WSG] Using ellipsis to indicate truncated overflow content

[Matthew Pennell]

On Tue, Nov 15, 2011 at 6:49 AM, Grant Bailey
 wrote:
> Is anyone able to offer suggestions as to how demonstrate to the user that
> overflow content has been truncated, like this (see attachment).

text-overflow: ellipsis?

http://www.quirksmode.org/css/textoverflow.html

- Matthew


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***

[WSG] Using ellipsis to indicate truncated overflow content

[Grant Bailey]

Hello,

Is anyone able to offer suggestions as to how demonstrate to the user 
that overflow content has been truncated, like this (see attachment).


There are some jQuery solutions available but I was hoping for a 
CSS-only solution, especially one that could cope with flexible column 
widths.


If anyone could offer suggestions I would be grateful.

Thank you and regards,

Grant Bailey
(attachment)




***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***<>