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

如评论中所述，您不会使用 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;

链接的 post 有更多关于数据 uri 路径的信息和一些建议。

获取 var 的长度并创建宽度

Getting length of var and creating a width

php

content-length