获取var的长度并创建宽度


Getting length of var and creating a width

我有一个复杂的横幅背景和文本融入其中,所以我需要添加一个背景这个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>';
    }
}

正如在注释中所指出的,您不会在PHP中这样做。

Javascript将是一个更好的选择,尽管纯CSS在大多数情况下是适用的(但是你没有共享你的html,所以不能告诉你哪个是最好的)


这些应该可以回答你的问题:


用CSS :

如何动态调整DIV元素的宽度以适合其文本内容?

自动调整元素(div)大小以适合水平内容


使用JQuery或CSS:

动态调整容器大小以适合文本


我没有看到一个纯js的可接受答案,但我还是会坚持使用CSS,因为其他问题都有10个答案,通常包括可接受的答案。

这些应该能够影响任何类型的标签,包括'p',最小的调整。

如果只使用CSS的解决方案,那么就使用它。



UPDATE - IMPORTANT

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

CSS重复背景,精灵或1px png

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

这可以应用于"fusion-invoice-caption"或"h1"标记。

最坏的情况是,您查看之前的链接并在h1文本周围添加另一个包装器标签,但我看不出有必要。

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

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