How to break the product title into 2 lines?

  • Resolved catheg

    (@catheg)


    5 years, 4 months ago

    Hi there,

    Maybe a classical question, how to force the product title on 2 lines on archive products.

    https://ibb.co/q1055kq

    In the link, even if the title of the 2nd product is shorter, I want to display it on 2 lines in order not to break the display.

    css or code snippet.

    Thanks for your help.

    Best regards.

    Catherine.

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Support Stuart Duff – a11n

    (@stuartduff)

    Automattic Happiness Engineer

    5 years, 4 months ago

    Hi @catheg,

    By default on any web app text will increase the height of the element it’s displayed within dependent on the length of that text. ie. longer text will take up more space than shorter text and may expand to what looks like two lines, it’s not lines though merely space.

    It may be possible for you to create some CSS which specifies a minimum height for the text container HTML so that even if the shorter text is displaying that container would be the same height as a longer title.

    To achieve this type of customization I’d recommend using Google Chrome Developer Tools. You can right click anywhere on your webpage to select ‘Inspect Element’, the HTML and CSS properties show up right in your browser.

    con

    (@conschneider)

    Engineer

    5 years, 4 months ago

    Hi there,

    We haven’t heard back from you in a while, so I’m going to mark this as resolved – if you have any further questions, you can start a new thread.

    Kind regards,

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘How to break the product title into 2 lines?’ is closed to new replies.