我有一个复杂的横幅背景和文本融入其中,所以我需要添加一个背景这个div,所以它显示给定的文本。是否有一种方法使用PHP,我可以得到文本的长度,并把它变成一个px
,所以我可以用它来设置div的宽度?
我想让entry-title
自动运行
<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路径的建议。