CSSでインライン要素内の文字列を省略

超今更な話だけどちょっと詰まったので覚え書きとしてメモ。

p {
width:100px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
-webkit-text-overflow:ellipsis;
-o-text-overflow: ellipsis;
}

こんな感じで出来るのはあちこちに書いてあってよく分かった。で？インライン要素はどうすればいいの？text-overflowの効果はブロックレベル要素のみでインライン要素には効かない。だからといってインライン要素をブロックレベル要素に変えたらレイアウトが崩れる。1日の試行錯誤の結果displayでinline-blockを指定すればいいという事になった。これは要素としてはインラインとして振る舞うが要素内部はブロックレベルとして機能するという優れもの。つまりこうなる。

span {
width:100px;
display:inline-block;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
-webkit-text-overflow:ellipsis;
-o-text-overflow: ellipsis;
}

これで万事解決。