htmlcss

CSS - Text appears under DIV instead of breaking onto new line

I'm working on a site which has filters on category pages - http://www.purrfectlyyappy.com/fun-and-games/dog-toys

The filter is on the left hand side, but the text in the filter appears under the products when it's too long, is there a way I can set it to break onto a second line if the name is too long?

Seem like it should be easy, but I've been struggling on this!

Solution

  • This is happening because there is a css in you page

    .hikashop_filter_checkbox {
    white-space: nowrap;
}

    Above css is already applied on your html page which is forcing elements to come in single line.

    You can either remove this css and if not then use following css in label

    .hikashop_filter_checkbox label{
    white-space: normal;
}