HTMLのtitle属性で表示されるtooltip。ブラウザが判断しある程度の長さで自動的に改行されますが、任意の場所に改行を入れたい場合があります。これを実現する方法です。
そんなときには…改行したい場所で改行文字を直接書くだけでOKです。
<span title="aaa bbb">…</span> いささか不恰好ですが。
また実体参照で改行文字を記述してもOKです。改行したい位置に以下のどれかを書けばOKです。

 
 
 ※「&#nn;」は文字実体参照でnnを10進数の値とみなし、「&#xnn;」ならnnを16進数の値とみなし、その値の文字コード(Unocode)の文字を表示します。「 」もしくは「
」で「CR」を、「 」もしくは「
」で「LF」を表します。また「あ」もしくは「」で「あ」を表します。個人的にはシンプルに「 」か「
」がいいと思います。
使用例
<span title="aaa
bbb">…</span> ちなみにJavaScriptでtitle属性を設定する場合には、「\n」と書けばOKです。
document.getElementById("…").title = "12345\n67890";
ブラウザの対応とHTMLの仕様IE8(各互換モードでも)・Chrome14・FireFox12ではすべてOKでした。(ちなみにFireFox7はNGでした。どのバージョンからOKになったのかわかりません)。
HTML仕様書 (Index of the HTML 4 Attributes)では、title属性はType 「%Text;」とされています。実体は「CDATA」です。CDATA(Character Data)は次のように定められています。
CDATA is a sequence of characters from the document character set and may include character entities. User agents should interpret attribute values as follows: ・Replace character entities with characters, ・Ignore line feeds, ・Replace each carriage return or tab with a single space. 独自訳
ユーザエージェントは次のように、属性値を解釈する必要があります。 ・文字実体は文字に置き換える ・LFは無視する ・CRとタブはそれぞれスペース1つに置き換える つまりHTMLの仕様上は改行することはできないということであり、古いFireFoxだけがこの仕様に則した実装になっていたといえると思います。しかし、IEやChromeおよび新しいFireFoxでは、仕様に則すよりもHTML作成者の意図を汲み取って柔軟に解釈し表示するようにしたということでしょう。
2011/11/03
|
Code Tips >