Получение длины var и создание ширины

У меня есть сложный фон баннера, и текст сливается с ним, поэтому мне нужно добавить фон к этому 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>';
}
}

0

Решение

Как отмечено в комментариях, Вы не будете делать это с PHP.

Javascript было бы лучше сделать ставку, хотя чистый CSS применимо в большинстве случаев (но вы не поделились своим HTML, поэтому не могли сказать вам, что лучше)

Это должно ответить на ваш вопрос:

С помощью CSS:

Как я могу динамически изменить ширину элемента DIV, чтобы соответствовать его текстовому содержимому?

Авторазмер элемента (div), чтобы подогнать горизонтальное содержимое

С помощью JQuery или CSS:

Динамически изменить размер контейнера, чтобы соответствовать тексту

Я не мог видеть ответ, принятый чисто js, но я все равно просто придерживался CSS, так как для этого на каждый другой вопрос использовалось 10 ответов, часто включая принятый ответ.

Они должны быть в состоянии повлиять на любой тип тега, включая ‘p’, с минимальной настройкой.

Если работает только CSS-решение, используйте его.

ОБНОВЛЕНИЕ — ВАЖНО

Теперь, когда этот код был распространен и вопрос прояснен, у меня есть новый и очень простое решение.

CSS повторяющийся фон, спрайт или 1px png

Примените 1-пиксельное изображение с некоторой прозрачностью или приглушенными цветами или чем-то еще, и повторите это так, чтобы это заполнило позади текста.

Это может быть применено либо к тегу fusion-invoice-caption, либо к тегу h1.

В худшем случае, вы смотрите на предыдущие ссылки и добавляете еще один тег-обертку вокруг текста h1, но я не вижу в этом необходимости.

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

Связанный пост содержит больше информации и некоторые предложения по поводу data-uri для поиска путей.

1

Другие решения

Других решений пока нет …