デリミタで区切られたテキストを改行して表示する

投稿
最終更新

以下、メモ。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title>デリミタで区切られたテキストを改行して表示</title>
<style type="text/css">
.delimiter {
  display: block;
  visibility: hidden;
  height: 0;
}
</style>
<p>
hoge<span class="delimiter">／</span>fuga
</p>

スタイルシートが無効な環境ではデリミタ文字が表示され、有効な環境ではリストのように改行されて表示されるはずです。

速攻で思いついたやつなので、もっと良い方法があるかもしれませんが。

2009年7月2日追記IE6以下は height: 0; が効かないようですね。互換性を考えると font-size: 0; の方がよいかもしれません。

2010年1月6日追記IE7とOperaでの印刷時にも height: 0; が効きません。また、Google Chromeでは逆に font-size: 0; が効きません。両方指定した方がよさそうですね。