Question

I’m using a custom theme and I need to find a way to make the title wrap to the second line. The theme has a carousel and the title is displayed below. At the moment, if the title is too long it has “…” after it. How can I stop this and make it wrap to the second line instead?

This is the code from the theme

<div class="home-carousel">
  <ul>
    <?php
    $carimgheight = 120;
    if ( get_option('storefront_carousel_img_height' )) {$carimgheight = get_option('storefront_carousel_img_height' ); }
    $carimgwidth = 200;
    if ( get_option('storefront_carousel_img_number' ) == 2 ) {$carimgwidth = 428;}
    if ( get_option('storefront_carousel_img_number' ) == 3 ) {$carimgwidth = 276;}
    if ( get_option('storefront_carousel_img_number' ) == 5 ) {$carimgwidth = 154;}
    if ( get_option('storefront_carousel_img_number' ) == 6 ) {$carimgwidth = 124;} 
    //BEGIN Slider LOOP
    $loopcarousel = new WP_Query( array( 'post_type' => 'carousel' ) );
    while ( $loopcarousel->have_posts() ) : $loopcarousel->the_post();
    $buttonlink = get_post_meta($post->ID, "link", true);
    if(has_post_thumbnail()) {
    $carthumb = get_post_thumbnail_id(); 
    $carimage = vt_resize( $carthumb, '', $carimgwidth, $carimgheight, true );
    }
    ?>
        <li>
            <a href="<?php echo $buttonlink; ?>" title="<?php the_title(); ?>"><img alt="<?php the_title(); ?>" title="<?php the_title(); ?>" src="<?php echo $carimage['url']; ?>" width="<?php echo $carimage['width']; ?>" height="<?php echo $carimage['height']; ?>" /><?php if ( get_option('storefront_carousel_image_only') == "false" ) { ?><p><span class="carousel-title"><?php echo the_title(); ?></span></p><?php } ?></a>
        </li>
    <?php endwhile; //END SLIDER LOOP ?>

  </ul>

Answer 1

The ellipsis (…) could be added either client side or server side. Chances are pretty it is added using CSS text-overflow: ellipsis;. View the HTML source of the page (the output, not the template), if the full title text is present you can assume the ellipsis is added client side. If you see the ellipsis, you need to track down a custom filter in WordPress that has added it.

Presuming .carousel-title is the selector to which the style is applied, you can comment out or remove the text-overflow: ellipsis; rule altogether. There may be additional vendor prefixed properties which will need to be removed as well, eg. -o-text-overflow: ellipsis. There may also be a -moz-binding: property which is used to add ellipsis support for Firefox versions prior to 4, you can remove that as well.