wanichanの日記

ちょっとした技術メモ。Microsoft中心。Webサイト管理等にまつわるネタ、サイトの更新情報等を発信中。最終版はwanichan.comに掲載していきます。

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

密かに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>

私はGoogle Chromeを主に使ってるんですけど、Microsoft Edgeにおいても同様にはみ出てしまいます。

f:id:wanichan:20180910145314p:plain

やっぱりながーいリンク文字列は止めた方がいいですかね?