Thickboxのtitleを</br>なしで改行

質問

お世話になります。
以前同じ質問をさせていただいたのですが、私の説明の仕方が悪くて、希望している通りの回答が得られなかったので、再度質問させていただきます。

Thicboxというjqueryを使って画像をライブラリとして表示させているのですが、
その際に、下記のように、titleキャプションに多少長めの解説文を書き込みたいと思っているのです。

<a href="images/thicbox001.jpg" class="thickbox" title="このタイトルはダミーです。<br />このようなかたちで改行したいと思っています。<br />どうすればいいのでしょうか？教えてください！"><img src="images/wall-img_20.jpg" alt="画像の説明文" /></a>

いろいろなサイトの説明を見ると、本来ThickBoxを利用してtitleタグで画像の説明をする時は、一言程度の説明で済ますくらいのものみたいです。ですが、今回、ある程度の説明文を加えたいと思っています。それで、<br />を用いて改行することにしました。そうしたら問題なく希望している通りの表示がされました。（添付画像のような表示です。）
ところが問題はバリデータでチェックすると絶対にやってはいけない間違った書き方であること、そしてサムネール画像にマウスオン（:hover時）すると、自動的にtitleタグがキャプションとして表示され、<br />という表記も一緒にでてきてしまうのです。

これを解決するにはどうしたらいいのでしょうか。
別個にHTMLファイルを作ってインラインフレームのような仕方で表示させる方法もあるみたいですが、できればそのような方法ではなく上記のtitleタグに<br />を用いず改行させる方法を教えていただければ本当にうれしく思います。

追いつめられて本当に困っています。
どうかよろしくお願いします。

回答No.3

ORUKA1951 · ベストアンサー

・表示されている要素のtitleの表示を隠すことは出来ない。
　[対策]
　　詳細な説明を[:active,:focus時に]表示される要素でなければならない。
「<br />を使用せずに現在のような表示を実現できないだろうか」
　は、出来ません。!!

　期待される動作をさせるためには、
・HTML自体を文書構造に従った正しいものに直すこと。

　結果的にtichboxは除外されます。(javascriptを改造しない限り)

　その上で、きちんとHTMLを作成します。それでよければHTMLは
<div class="album">
　<ol>
　　<ul>
　　　　<li><img サムネイル>
　　　　　　<ul>
　　　　　　　　<li><img></li>
　　　　　　　　<li>説明文</li>
　　　　　　</ul>
　　　　</li>
　　　　<li><img サムネイル>
　　　　　　<ul>
　　　　　　　　<li><img></li>
　　　　　　　　<li>説明文</li>
　　　　　　</ul>
　　　　</li>
　　　　<li><img サムネイル>
　　　　　　<ul>
　　　　　　　　<li><img></li>
　　　　　　　　<li>説明文</li>
　　　　　　</ul>
　　　　</li>
　　</ul>
</div>

あるいは、
<div class="album2">
　　<div class="index">
　　　　<ol>
　　　　　　<li><a href="#a1"><img サムネイル></a></li>
　　　　　　<li><a href="#a2"><img サムネイル></a></li>
　　　　　　<li><a href="#a3"><img サムネイル></a></li>
　　　　</ol>
　　</div>
　　<div class="data">
　　　　<dl>
　　　　　　<dt id="a1"><img>画像の</dt>
　　　　　　<dd>説明</dd>
　　　　　　<dt id="d2"><img>画像の</dt>
　　　　　　<dd>説明</dd>
　　　　　　<dt id="d3"><img>画像の</dt>
　　　　　　<dd>説明</dd>
　　　　</dl>
　　</div>
</div>

のようなHTMLになるでしょう。いずれの場合もスタイルシートを使わない検索エンジンなどが文書の内容・構造をきちんと理解できますね。その上で、(背景を黒っぽくして画像と説明を表示するなど)期待される表示をスタイルシートでデザインするのが本来の方法です。そうしておけば、先で他のデザインにすることも、スマートホン用に別のスタイルを書くことも自由自在です。

　ただ、いずれにしても自身の知識や能力と見合ったものでないと、JQueryを使おうが、CSSで行おうが難しく使いこなせないでしょう。

補足

いつも本当にご親切にありがとうございます。
なるほど、やはり<br />なしで改行するのは無理ですか...
実はThickboxでオーバーレイ表示は今回はどうしても必要なんです。
ですから後残っている手段はJava Scriptを書き換えるということになりますね...すいません、私はjsの知識はまったくありませんので、自身でソースを見て判断したりはできないのですが、やはりある程度困難な修正なんでしょうか？
ここの質問欄で「ここの、これをこうする」っていう程度のレベルではなさそうですね。
それでもいつも時間とって質問に答えてくださりありがとうございます。

回答No.2

ORUKA1951

了解です。
ただ、titleが表示されるのはブラウザの実装自体の問題ですから、その要素にtitleを書く限りは、必然的に発生します。また、<img>要素にtitleを書き、それを表示させる方法はないかもしれません。imgは内容を持たないので、内容の後に要素を生成するcontentが使えない。
　よって、Tickbox以外の方法を使わなければならないかもしれません。
　この様な複雑なjavascriptを改変するするのは大変なので、もって簡単なCSSを使って作成するほうが良いかと・・私はCSSのほうが得意・・・。ただし、HTMLも本来の文書構造に従ったものにする必要があるでしょう。TickboxではデザインのためにHTMLを作るという側面があるのでHTMLの考え方すらはずれてますし・・

　今から出かけますので、後で見てみます。

回答No.1

ORUKA1951

title属性の値を表示したいときは
:after、または:beforeの擬似要素[詳細度0,0,0,1]とともに、content:プロパティを使います。
content:で可能な値は、
normal | none | [ <string> | <uri> | <counter> | attr(<identifier>) | open-quote | close-quote | no-open-quote | no-close-quote ]+ | inherit
です。

normal：空の擬似要素ブロックを生成します。(デフォルト)
none：なにもしません。CSS2.1で追加されました。・・生成されるブロックを消すため
内容の追加
　　<string>：文字列
　　<uri>：
　　<counter>：見出しなどに連番を振るとき、何節-何章-何項とか・・
　　attr(<identifier>)
　　open-quote
　　close-quote
　　no-open-quote
　　no-close-quote
inherit：この継承しないプロパティを故意に継承させる

★ここで生成される文字列は、HTMLの文字表記に従います。
9.1 空白類 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/text.html )

そのためHTMLでは、<pre>、スタイルシートではwhite-space:pre;などで指定しない限り改行はされません。
HTMLではpreしかありません。継承されるプロパティなので、親要素にpreが指定していない場合は、スタイルシートで指定します。

その結果、宣言ブロックの内容は
content:attr(title);/* タイトル属性を表示 */
display:block;
width:20em;
position:absolute;
top:10px;left:10px;
white-space:pre-line;/* 別記説明 */
background-color:yellow;
border:solid red 2px; padding:0.5ex 0.5em;
}
のようになるはずです。
white-spaceまとりうる値は
normal | pre | nowrap | pre-wrap | pre-line | inherit
それぞれの値は
normal：通常のHTMLに従います。※タグはそのまま表示されます。
pre：HTMLの<pre>と同じです。空白文字はその数だけ表示されます。
nowrap：一般の空白文字と同じ扱いで整理されますが、はみ出しても改行されません。
pre-wrap：空白文字はそのままですが、はみ出した場合は改行されます。★CSS2.1より
pre-line：normalと同じに、はみ出した場合だけでなく改行コードでも改行されます。★CSS2.1より
inherit：継承

なお、改行コードは\Aですので、スタイルシートで直接文字を書き込む(string)ときは、
white-space:pre-line;
content:"長い文字列の\Aここで改行します。";
のようにします。

結論
title="このタイトルはダミーです。
このようなかたちで改行したいと思っています。
どうすればいいのでしょうか？教えてください！"

とHTMLを書く。

CSSで、
white-space:pre-line;
とする、preだと、ユーザーがフォントサイズを変えたときなどにはみ出す。

title="このタイトルはダミーです。
＿＿＿＿このようなかたちで改行したいと思っています。
＿＿＿＿どうすればいいのでしょうか？教えてください！"
とHTMLのソース上タブが入る場合は、pre-wrapです。

詳しい説明は、先日の回答と参考サイトをよく読みなさい。

★:hoverで表示させたくないときは、titleの別の要素に書いてください。<img>はcontentが無効なので、それ以外の要素に・・
<a href="#"><span title=""><img></span></a>

として、
a span:after{・・・とか

　でもね。javascript使うよりCSS使うほうが簡単だと思いますけど・・

補足

回答ありがとうございます。
必死で解説文も読んで検索して調べたりしたんですが、ちょっと私には上級すぎるのかもしれません笑。

サムネール画像のhoverすると、CSSのとおりのキャプションが出ます。ですが、別にこれは必要ないものです。キャプションがCSSで作ったものと、自動で表示されるものと２つ出現してしまいますし、そもそもキャプション自体特に表示されなくても問題はないんです。ただ、Thickboxでtitleタグを書くと、いやがおうにも勝手に表示されそこに<br />が視覚的に見えているのが嫌なのでそれを解決したい（thickboxのロールオーバー時の表示はデザイン的には問題ありません。ただソースの記述としてふさわしくないという点があります。）<br />を使用せずに現在のような表示を実現できないだろうかという質問です。

とりあえずご指摘のとおりにソースを変更してみたのが下記です。申し訳ありません、よろしければ改めてご指摘ください。

HTML---

<p class="thickbox-title"><a href="images/thicbox_001.jpg" class="thickbox" title="このタイトルはダミーです。
このようなかたちで改行したいと思っています。
どうすればいいのでしょうか？教えてください！"><img src="images/wall-img_15.jpg" alt="画像の説明文" /></a></p>

CSS---

p.thickbox-title {
　position:relative;
}
a.thickbox:hover:after{
　content:attr(title);
　display:block;
　width:20em;
　position:absolute;
　top:10px;left:10px;
　white-space:pre-line;
　background-color:yellow;
　border:solid red 2px; padding:0.5ex 0.5em;
　}