toggle category text??

[Islandrose]

Is there anybody knows how to reduce the length of category header text and append a "read more" link on all category headers when using mobile view only.

[Matt Zimmermann]

You could use a combination of CSS, where you would set a maximum height on the containing element and hide any overflow, and JavaScript to detect if there is overflow and toggle the height of the element.

[AHerb]

<div id="my-element" style="max-width: 333px; overflow: hidden;">this is my long text: asdkjahskdja hsdkljas dhlkjas dhlslaa skl hakjas dhak djhakjs dhkjasdh hs</div>

everything over 333px of width will be hidden

@media screen and (max-width: 640px) {
    #my-element::after {
        content: ' Read more...';
    }
}

on screens below 640px there will be a "Read more..." added to the div above

[Islandrose]

thanks for the reply..gonna try this out.

[Bruce - PhosphorMedia]

if you need height not width, change 'max-width' to 'max-height'

you would also need a trigger to remove the max-height when an element is clicked, like:
$(document).ready(function() { $("#my-element").click(function() { $(#my-element").css("max-height:none"); }); }); (Note: you'd need to put the inline styles Iherb used in a class statement.)
(Also Note: written, not tested...)