У меня есть сложный фон баннера, и текст сливается с ним, поэтому мне нужно добавить фон к этому 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), чтобы подогнать горизонтальное содержимое
С помощью 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 для поиска путей.
Других решений пока нет …