Getting length of var and creating a width

Question

I have a banner background that is complex and the text blends into it so I need to add a background to this div so it shows the text given. Is there a way using PHP that I can get the length of the text and turn it into a px so I then can use it to set a width on the div?

Its the entry-title that I want to be automatic

HTML:

<div class="fusion-page-title-bar fusion-page-title-bar-none fusion-page-title-bar-left">
    <div class="fusion-page-title-row">
        <div class="fusion-page-title-wrapper">
            <div class="fusion-page-title-captions">
                <h1 class="entry-title" data-fontsize="31" data-lineheight="NaN">Cheats Hidden Vegetables</h1>
            </div>
        </div>
    </div>
</div>

Function:

function avada_page_title_bar( $title, $subtitle, $secondary_content ) {
        global $smof_data;
        $post_id = get_queried_object_id();

        // Check for the secondary content
        $content_type = 'none';
        if ( strpos( $secondary_content, 'searchform' ) !== FALSE ) {
            $content_type = 'search';
        } elseif ( $secondary_content != '' ) {
            $content_type = 'breadcrumbs';
        }

        // Check the position of page title
        if ( metadata_exists( 'post', $post_id, 'pyre_page_title_text_alignment' ) && 
             get_post_meta( get_queried_object_id(), 'pyre_page_title_text_alignment', TRUE ) != 'default' 
        ) {
            $alignment = get_post_meta( $post_id, 'pyre_page_title_text_alignment', TRUE );
        } elseif ( $smof_data['page_title_alignment'] ) {
            $alignment = $smof_data['page_title_alignment'];
        }

        // Render the page title bar
        echo sprintf( '<div class="fusion-page-title-bar fusion-page-title-bar-%s fusion-page-title-bar-%s">', $content_type, $alignment );
            echo '<div class="fusion-page-title-row">';
                echo '<div class="fusion-page-title-wrapper">';
                    echo '<div class="fusion-page-title-captions">';
                        if( $title ) {
                            // Add entry-title for rich snippets
                            $entry_title_class = '';
                            if ( ! $smof_data['disable_date_rich_snippet_pages'] ) { 
                                $entry_title_class = ' class="entry-title"';
                            }                   
                            echo sprintf( '<h1%s>%s</h1>', $entry_title_class, $title );

                            if ( $subtitle ) {
                                echo sprintf( '<h3>%s</h3>', $subtitle );
                            }
                        }

                        // Render secondary content on center layout
                        if ( $alignment == 'center') {
                            if ( fusion_get_option( 'page_title_bar_bs', 'page_title_breadcrumbs_search_bar', $post_id ) != 'none' ) {
                                echo '<div class="fusion-page-title-secondary">';
                                    echo $secondary_content;
                                echo '</div>';
                            }
                        }

                    echo '</div>';

                    // Render secondary content on left/right layout
                    if ( $alignment != 'center' ) {
                        if ( fusion_get_option( 'page_title_bar_bs', 'page_title_breadcrumbs_search_bar', $post_id ) != 'none' ) {
                            echo '<div class="fusion-page-title-secondary">';
                                echo $secondary_content;
                            echo '</div>';
                        }
                    }

                echo '</div>';
            echo '</div>';
        echo '</div>';
    }
}

Answer 1

As noted in comments, you wouldnt do this with PHP.

Javascript would be a better bet, though pure CSS is applicable in most cases (but you didnt share your html so couldnt tell you which is best)

These should answer your question:

With CSS:

How can I dynamically resize a DIV element's width to fit its text content?

Autoresize Element (div) to Fit Horizontal Content

With JQuery or CSS:

Dynamically resize container to fit text

I couldnt see a pure-js accepted answer, but I would just stick with CSS anyway, as thats what every other question had 10 answers using, often including the accepted answer.

These should be able to affect any type of tag, 'p' included, with minimal tweaking.

If a CSS only solution works, then use it.

UPDATE - IMPORTANT

Now that code has been shared and question clarified, I have a new and very simple solution.

CSS repeating background, sprite or 1px png

Apply a 1px image with some transparency or muted colours or whatever, and repeat it so it fills behind the text.

This might be applied to either the "fusion-invoice-caption" or the "h1" tag.

Worst case, you look at previous links and add another wrapper tag around the h1 text, but i cant see that being needed.

background: url("path/to/background.png") top left repeat-x;

The linked post has more info and some suggestions about data-uri for pathing.