常連

自己紹介

[wordpressでタイトルに特定の文字列が含まれた画像を一覧取得したい。](https://teratail.com/questions/167187)
上記の質問をさせて頂き、ご回答のおかげで解決したのですが、ページ送りが必要になり、コードを編集してみたのですが動作しません。
(表示件数を「1」にすると、1ページ目と２ページ目が同じ内容（画像を全件取得）が表示されます。表示件数を「10」にすると、条件に当てはまる画像を全件取得を２回繰り返し、ページナビが表示されません。)
固定ページでテンプレートを選択し利用を考えており、ページ送りはWP-PageNaviを設定しています。
どこが間違っているか教えて頂けないでしょうか。
宜しくお願い致します。
（前回のページにまとめて書いたほうがよかったのかも知れませんが、解決済みにしてしまったので新たに質問をさせて頂きました。）
```ここに言語を入力
　　　　　　　　　<?php
		global $wpdb;
		$attachments = $wpdb->get_results( $wpdb->prepare( "SELECT ID FROM $wpdb->posts WHERE post_type = 'attachment' and post_title like '%%%s%%';",'abc' ) );
		?>
		
		<?php 
		$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
		$args = array(
		'posts_per_page' => 10, // 表示する記事数
		'paged' => $paged,
		); ?>
		
			<?php $wp_query = new WP_Query( $args ); ?>
		<?php while ( $wp_query->have_posts() ) : $wp_query->the_post(); ?>


		<ul class="imageList">
			<?php if( !empty( $attachments  )):?>
			<?php foreach( $attachments as $attachment ):setup_postdata($attachment); ?>
			<li><?php echo wp_get_attachment_image( $attachment->ID ); ?></li>
			<?php endforeach; ?>
			<?php endif; ?>
		</ul>

		<?php endwhile; ?>
		<?php wp_reset_postdata(); ?>
　　　　　　　　　<?php wp_pagenavi();?>
```
修正後
```ここに言語を入力
　　　　　　　　　<?php
		global $wpdb;
		$attachments = $wpdb->get_results( $wpdb->prepare( "SELECT ID FROM $wpdb->posts WHERE post_type = 'attachment' and post_title like '%%%s%%';",'abc' ) );
		?>
		
		<?php 
		$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
		$args = array(
		'posts_per_page' => 10, // 表示する記事数
		'paged' => $paged,
		); ?>
		
			<?php $wp_query = new WP_Query( $args ); ?>
		<?php while ( $wp_query->have_posts() ) : $wp_query->the_post(); ?>


		<ul class="imageList">
			<?php if( !empty( $attachments  )):?>
			<?php foreach( $attachments as $attachment ):setup_postdata($attachment); ?>
			<li><?php echo wp_get_attachment_image( $attachment->ID ); ?></li>
			<?php endforeach; ?>
			<?php endif; ?>
		</ul>

		<?php endwhile; ?>
		<?php if(function_exists('wp_pagenavi')):
    wp_pagenavi(array('query'=>$wp_query));   ////wp_pagenavi()の呼び出し(ただし、引数の指定が必要！)
  endif; ?>
		<?php wp_reset_postdata(); ?>
```

wordpressでタイトルに特定の文字列が含まれた画像を一覧取得し、ページ送りしたい。

####現状

bootstrapを使用し、下記のようなものをhtml.erbで書いています。

@hoge.nameは商品名が入り、最大で50文字ほどの文字列が入ることもあれば、5文字程度のこともあります。レイアウトの都合上、col-1の範囲内で納めたいのでtext-nowrapを使用し、はみ出る部分はスクロールさせています。

```html.erb
<% @hoge.each do |hoge| %>
  <div class="col-1 text-nowrap" style="overflow: scroll">
    <p><%= hoge.name %></p>
  </div>
<% end %>
```
↓ erb実行結果
```html
<div class="col-1 text-nowrap" style="overflow: scroll">
  <p>商品名商品名商品名商品名商品名商品名商品名商品名商品名商品名商品名商品名商品名商品名商品名商品名商品名商品名商品名商品名</p>　
</div>
<div class="col-1 text-nowrap" style="overflow: scroll">
  <p>商品名</p> 
</div>
<div class="col-1 text-nowrap" style="overflow: scroll">
  <p>商品名商品名商品</p> 
</div>
```

####実現したいこと
col-1からはみ出る時はdiv要素の右端にシャドウをつけたいです（文字長いからはみ出てるよ！という主張をしたいです）。ただしはみ出ない場合はシャドウをつけたくないです。

####質問
どうすれば実現できますか？

overflowした時のみ、div要素にシャドウを作りたいのですが。。

### 前提・実現したいこと

HTMLが一部表示されない状況を解消したいです。

### 発生している問題・エラーメッセージ

iPhoneXRでSafariで開いた場合にhtmlの一部が表示されません。
chromeで開いた場合には表示されるようです。

PCやandroidなどでは問題なく表示されます。

具体的には、
下記ソースコードの「TEL」、「FAX」のみが表示され、番号(00-0000-0000)が表示されません。
文字と数字にはCSSの差はないので原因がわかりません。



### 該当のソースコード

```html
 <span class="info">TEL 00-0000-0000</span>
 <span class="info">FAX 00-0000-0000</span>
```
```css
footer .footer-contact .info {
    margin-right: 50px;
    font-weight: bold;
    font-size: 2rem;
    letter-spacing: 0;
    font-family: "Yu Gothic", sans-serif;
```

### 試したこと

下記のように番号の後に文字を足したところ、番号が表示されました(aaaも表示される)。
```html
 <span class="info">TEL 00-0000-0000aaa</span>
 <span class="info">FAX 00-0000-0000aaa</span>
```
なので、番号の後に文字を置き、その文字を表示させない方法を試してみましたが、下記のソースでは番号が表示されなく、今に至ります。
```html
 <span class="info">TEL 00-0000-0000<span style="display:none;">aaa</span></span>
 <span class="info">FAX 00-0000-0000<span style="display:none;">aaa</span></span>
```
```html
 <span class="info">TEL 00-0000-0000<span style="display:inline-block; overflow: hidden; text-indent: -20%;">aaa</span></span>
 <span class="info">FAX 00-0000-0000<span style="display:inline-block; overflow: hidden; text-indent: -20%;">aaa</span></span>
```

また、番号を全角にしても表示されません。

### 補足情報（FW/ツールのバージョンなど）