获取 var 的长度并创建宽度

Question

我有一个复杂的横幅背景，文本融入其中，所以我需要为这个 div 添加一个背景，以便它显示给定的文本。有没有一种使用 PHP 的方法可以获取文本的长度并将其转换为 px 以便我可以使用它来设置 div 的宽度？

它是我想要自动的entry-title

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 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

如 cmets 中所述，您不会使用 PHP 来执行此操作。

Javascript 会是更好的选择，虽然 pure CSS 在大多数情况下都适用（但你没有分享你的 html，所以无法告诉你哪个最好）

这些应该可以回答您的问题：

使用 CSS：

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

Autoresize Element (div) to Fit Horizontal Content

使用 JQuery 或 CSS：

Dynamically resize container to fit text

我看不到纯 js 接受的答案，但无论如何我都会坚持使用 CSS，因为其他所有问题都有 10 个答案，通常包括接受的答案。

这些应该能够影响任何类型的标签，包括“p”，只需最少的调整。

如果仅使用 CSS 的解决方案有效，请使用它。

更新 - 重要

现在代码已经共享并且问题得到澄清，我有一个新的非常简单的解决方案。

CSS repeating background, sprite or 1px png

应用具有一些透明度或柔和颜色或其他任何内容的 1px 图像，然后重复它以填充文本后面。

这可能适用于“fusion-invoice-caption”或“h1”标签。

最坏的情况是，您查看以前的链接并在 h1 文本周围添加另一个包装标签，但我看不出需要这样做。

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

链接的帖子包含有关用于路径的 data-uri 的更多信息和一些建议。