画像の幅に合わせて画像下にテキスト配置、画像の幅より右折り返しが短くなります。

HTML5 Flexbox 詳しい方どうぞご教授宜しくお願い致しますm(__)m　ノートパソコンで作業しております。

肝心なソース部分を抜粋します ↓ ↓ ↓
<div class="flex-items">
<div class="content2">
<div id="zukan">
<p><img src="aoji001.jpg" alt="アオジ"></p>
<p>スズメ目ホオジロ科ホオジロ属（日本中に分布、<strong>体長16cm、体重16～25g</strong>）、北海道～本州中部より北で繁殖し、冬になると関東より南、四国・九州へ移動し越冬します。</p><p><a href="../../Wild-bird.html"><strong>戻る</strong></a></p>
</div>

肝心CSSな部分を抜粋します ↓ ↓ ↓

#zukan p {
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
font-size: 17px;
color: #082203;
text-align: left;
max-width: 642px;
line-height: 1.7em;
letter-spacing: 0.1em;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}

画像サイズがVGA(640＊480)で、max-width: 640px; にしますと更に右にスペースができてしまいます。仕方なくmax-width: 642px;にしております。

●上記ページURL → http://urx.red/lV0u (短縮URLで変なページへ飛びませんで安心して下さい)

●テキスト文「体重で折り返され」右に大きな空白ができてしまい、一週間ほど似たようなケースやヒントないか探しましたがありませんでした(汗)

HTML5に詳しい方、何かわかりましたら何でも宜しいので、どうぞ宜しくお願い致しますm(__)m

質問者からの補足コメント

• ●普通のテキスト文では右にスペースができないので、（体重16～25g）ここが怪しいので先程、（～波ダッシュ部分）を（体重16から25g）に変更、そうしましたら綺麗に表示されました！
  
  ●波ダッシュ、ハイフンだと同じように右にスペースが空くことが分かりました。
  
  波ダッシュを使っても折り返しが綺麗に表示する方法などあるものでしょうか・・・、それとも誰にでも起きる現象なのでしょうか！？
  
  お詳しい方要らしゃいましたら、ご教授宜しくお願い致しますm(__)m

    補足日時：2019/06/02 05:09

• 強制で「折返し」「折返し禁止」凄いテクニックです！ 2パターンも試しましたが、体重で折り返されてしまいました。

  No.1の回答に寄せられた補足コメントです。 補足日時：2019/06/02 05:16

• 波ダッシュを使わにで、折り返しも気にしないでテキストを書いてゆこうと思います！
  
  とても丁寧な回答、心より感謝致しますm(__)m
  
  また、HTML5 で質問するかも知れません。その時はどうぞ宜しくお願い致します。

    補足日時：2019/06/02 06:27

No.1 ベストアンサー 回答者： naokita 回答日時： 2019/06/01 22:08

そんな事をしても、他のページでまた同じような現象/問題が永遠と起きるでしょう・・・

それに、タブレットやスマホはどうなるの？？
本来は折返しを気にする必要がありませんし、見る人の環境によって違うでしょうからね。
-----------

<p>は単なる文章段落なので、これが鳥図鑑という事ならHTMLでは、定義リストを使うべきでしょうね・・・

<dl>
<dt>アオジ</dt>
<dd>
<ul>
<li>スズメ目ホオジロ科ホオジロ属</li>
<li>日本中に分布</li>
<li><strong>体長16cm、体重16～25g</strong></li>
<li>北海道～本州中部より北で繁殖し、冬になると関東より南、四国・九州へ移動し越冬します。</li>
</ul>
</dd>
</dl>


CSSも追加
#zukan p {
　　　↓↓↓↓↓↓↓
#zukan p , #zukan dl {
多少は微調整が必要か。

--------------------

どうしても、折返ししたくない単語があるのなら、強制で「折返し」「折返し禁止」
体重16～25g　を改行せずに１行に収めたいなら）以下のどちかでしょうか。

<p>スズメ目ホオジロ科ホオジロ属（日本中に分布、<strong><span style="white-space: nowrap;">体長16cm、</span><span style="white-space: nowrap;">体重16～25g</span></strong>）、北海道～本州中部より北で繁殖し、冬になると関東より南、四国・九州へ移動し越冬します。</p>

<p>スズメ目ホオジロ科ホオジロ属（日本中に分布、<strong><span style="display: inline-block;">体長16cm、</span><span style="display: inline-block;">体重16～25g</span></strong>）、北海道～本州中部より北で繁殖し、冬になると関東より南、四国・九州へ移動し越冬します。</p>

この回答へのお礼

naokitaさん 前回に続き大変お世話になっております!!

指摘の通りデベロッパーツールでスマホ表示、iPhone8(隙間なく表示)、ipad(PCと同じように体重で折り返し)、になっております。問題はやはりフォントをボルドや～などを使った文章だけ右端に一文字分の空白ができています。

PC画面で主要、ブラウザの見え方チェックもしましたが「体重」の右にスペースが空いてしまいます。

●普通のテキスト文では右にスペースができないので、（体重16～25g）ここが怪しいので先程、～（波ダッシュ）を（体重16から25g）に変更、そうしましたら綺麗に表示されました！

●波ダッシュ、ハイフンだと同じように右にスペースが空くことが分かりました。

そこで「波ダッシュ 文章 折り返し おかしくなる」等で検索しましたが、該当する記事見当たりませんでした。

う～ん、波ダッシュを使うと折り返しがおかしくなることは普通なのでしょうか！？

お気づきの点なのあるようでしたら、ご教授宜しくお願い致しますm(__)m

お礼日時：2019/06/02 05:04