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 会是一个更好的选择，虽然纯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个答案使用，通常包括接受的答案。

这些应该能够影响任何类型的标签，＆＃39; p＆＃39;包括在内，只需要很少的调整。

如果仅使用CSS解决方案，则使用它。

更新 - 重要

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

CSS repeating background, sprite or 1px png

使用一些透明度或柔和的颜色或其他颜色的1px图像，并重复它以填充文本。

这可能适用于＆＃34; fusion-invoice-caption＆＃34;或者＆＃34; h1＆＃34;标签。

最糟糕的情况是，您查看以前的链接并在h1文本周围添加另一个包装标签，但我无法看到需要它。

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

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

获取var的长度并创建宽度

1 个答案: