なんでリンク文字列がはみ出るの？

密かにCSSメディアクエリを変更してます。1024ピクセル幅で閲覧する人は稀なんでしょうけど、1024ピクセルではサイドバー300ピクセル幅保とうって感じで200から300に変えました。

そしたら、メインコンテンツのパンくずリストがこんな感じにはみ出してしまうのです。

f:id:wanichan:20180910144540p:plain

www.htmq.com

段組み以外では、リンク文字列は折り返して表示されるんですが、あれれ？？？

white-spaceプロパティを追加してもダメです。

ちなみにHTMLはこんな感じ。

<div class="topic_path">
<div class="container" itemscope itemtype="http://schema.org/BreadcrumbList">
<span itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a href="/web/" itemprop="item"><span itemprop="name">Web</span></a><meta itemprop="position" content="1" /></span> &gt; 
<span itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a href="/web/expression/"　itemprop="item"><span itemprop="name">Expression</span></a><meta itemprop="position" content="2" /></span>
<!-- #BeginEditable "navi" -->&gt; 
<span itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a href="../" itemprop="item"><span itemprop="name">Expression Web 4</span></a><meta itemprop="position" content="3" /></span> &gt; 
<span itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a href="./" itemprop="item"><span itemprop="name">Chapter 1　Expression Web 4の概要とカスタマイズ</span></a><meta itemprop="position" content="4" /></span>
<!-- #EndEditable --></div>