前回の記事で、CSSのtext-overflow: ellipsisを使って長いテキストを省略する方法を紹介しました。しかし、パンくずリストで使用する場合にハマりポイントがあるので今回はパンくずリストにも正しく適用されるようにする方法を解説します。
この記事でわかること
- パンくずリストでの長いテキストを「...」で省略する方法
- widthとmax-widthを使用していない場合でも適用できる方法
はじめに
前回の記事では、CSSのtext-overflow: ellipsisを使って長いテキストを省略する方法を紹介しました。
しかし、パンくずリストで使用する場合にハマりポイントがあるので今回はパンくずリストにも正しく適用されるようにする方法を解説します。
パンくずリストでのハマりポイント
text-overflow: ellipsisを使用して、正しく長いテキストが省略されるようにするには、要素にwidthやmax-widthを設定して幅を決める必要があります。
ですが、パンくずリストでは通常動的にテキストが入り、widthなどで幅を決めることができません。
そこで、この記事では、幅を決めないでもtext-overflow: ellipsisが適用できる方法を解説します。
パンくずリストでの実装方法
HTML
まずは、HTMLの構造を示します。
<nav class="breadcrumb" aria-label="breadcrumb">
<ol itemscope itemtype="https://schema.org/BreadcrumbList" class="breadcrumb__list">
<li
itemprop="itemListElement"
itemscope
itemtype="https://schema.org/ListItem"
class="breadcrumb__item"
>
<a itemprop="item" href="/" class="breadcrumb__link">
<span itemprop="name">HOME</span>
</a>
<meta itemprop="position" content="1" />
</li>
<li
itemprop="itemListElement"
itemscope
itemtype="https://schema.org/ListItem"
class="breadcrumb__item"
>
<a itemprop="item" href="/components" class="breadcrumb__link">
<span itemprop="name">Components</span>
</a>
<meta itemprop="position" content="2" />
</li>
<li
itemprop="itemListElement"
itemscope
itemtype="https://schema.org/ListItem"
class="breadcrumb__item"
>
<span itemprop="name">長いテキストが入ります長いテキストが入ります長いテキストが入ります長いテキストが入ります長いテキストが入ります</span>
<meta itemprop="position" content="3" />
</li>
</ol>
</nav>
パンくずリストの実装方法が不明な方は、以下の記事を参考にしてみてください。
CSS
パンくずリストは横並びになるので、ol要素にdisplay: flexを設定します。
ここで、text-overflow: ellipsisを適用する要素は、最後のli要素のテキスト部分(span)に適用します。
また、テキストがはみ出さないように、navと最後のli要素にoverflow: hiddenを設定します。
/* テキストがはみ出さないようにoverflow: hiddenを設定 */
.breadcrumb {
overflow: hidden;
}
.breadcrumb__list:last-child {
overflow: hidden;
}
/* 最後のliのテキスト部分(span)にtext-overflow: ellipsisを適用 */
.breadcrumb__list:last-child span {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
このようにすることで、widthなどの幅を指定しない場合でも、「...」で省略することができました。
デモ
最後に、パンくずリストにtext-overflow: ellipsisを適用して、長いテキストを省略したデモを見てみましょう。
まとめ
たまに、実装する際に上手く適用しなくって悩んでしまったので、備忘録として記事を書きました。上手く適用しなくても、devToolsで1つずつ調整していけば原因や解決策が見つかるかと思いますので、ぜひ試してみてください。