やりたいこと
パンくずリストの構造化データで
- 枠で囲んでいる中のテキストが長いときは三点リーダーをつけたい
- 枠の長さを可変にしたい（widthを指定したくない）
- 短いときはそのまま表示したい
実装
パンくずリストのhtmlは下記と同じようにしています。（記事内では長くなるのでmicrodataは省略しています。）
パンくずリスト | Google 検索セントラル | Google Developers
<ol>
<li><a><span>TOP</span></a></li>
›
<li><a><span>Category1</span></a></li>
›
<li><a><span>Category2</span></a></li>
›
<li><a><span>すごくながいたいとるすごくながいたいとるすごくながいたいとるすごくながいたいとる</span></a></li>
</ol>
cssも一部抜粋です。構造はすごくシンプルでolをdisplay: flex;で横並びにしているだけです。
/* 横並びにする */
ol {
display: flex;
}
/* 最後のliのテキストが長いとき省略する */
li:last-child {
overflow: hidden;
}
li:last-child span {
display: block;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
表示はここから確認できます
https://jsfiddle.net/Lb8podhk/
なんでこうなるの？
はっきりと原因がわかってないのですが li に overflow: hidden; が必要なのは下記の記事と同じっぽいです。
flexbox内でtext-overflowが効かない | cly7796.net
対応方法としては、text-overflowの要素が入っている.flex-itemに対して、min-width: 0;を指定するといいようです。
もしくは、.flex-itemにoverflow: hidden;を指定でも対応できます。
span の方は text-overflow や overflow の適用対象がインライン要素ではないっぽいので display: block; などを追加してあげないとダメなのかな？と思っています。
text-overflow - CSS: カスケーディングスタイルシート | MDN
適用対象 ブロックコンテナー要素
overflow - CSS: カスケーディングスタイルシート | MDN
適用対象 ブロックコンテナー, フレックスコンテナー, グリッドコンテナー
余談
すごいニッチな悩みだと思うのですが解消するのに地味に時間かかったので共有です。
こんなんすぐ実装できるやろ〜と思っていたのに時間かかってしまったかなしみと
text-overflow: ellipsis使うときはwidthが指定してあるサンプルが多くてでも欲しいのはそうじゃない…という気持ちで書きました。