Three to Two line

Discussion in 'CSS' started by ganeshgrowth, Aug 18, 2009.

0
  1. #1
    I have a problem with my product catalog page.

    I have a restriction to only display 2 lines for the product names, but in some cases the product names flow to the third line. When the product name flow to the third line the page design spoils.

    I needed to know if using CSS I can display only first 2 lines of the product name and trunk the third line without causing any accessibility problems. Or, if there's is any other work around it will be great.
     
    ganeshgrowth, Aug 18, 2009 IP
  2. AssistantX

    AssistantX Peon

    Messages:
    173
    Likes Received:
    10
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Depending on how your page is constructed, if your div has a certain height, set the style to "overflow: hidden".
     
    AssistantX, Aug 18, 2009 IP
  3. ganeshgrowth

    ganeshgrowth Peon

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    I've tried using this solution but it does not show the visitor "...". I tried using "text-overflow: ellipsis". But this does not display "..." with Firefox. "text-overflow: ellipsis" is a part of CSS3 so I think we can expect Firefox getting a solution in future versions.

    But again the problem is the text gets truncated to one line instead. While I have a requirement of 2 line.
     
    ganeshgrowth, Aug 18, 2009 IP