<a>タグにて宣言した「data-tip」にcssにて
width:490px;
word-break: break-all;
を使用して折り返しを実装したいのですがうまくいきません。
html
1<dl class="thumbnail clearfix"> 2 <div> 3 <dt> 4 <a href="<?php echo $value->piy_img->getUrl("","")?>"> 5 <img src="<?php echo $value->piy_img->getUrlM()?>"; 6 data-tip="ID:<?php echo $value->id?><br>投稿者:<?php echo $value->club_member->nickname?><br>カテゴリ:<?php echo $value->is_category_str()?> 7 <br>投稿日時:<?php echo $value->created_at?><br><br>コメント<br><?php echo $value->body?>"> 8 </a> 9 </div> 10</dl>
css
1 dl.thumbnail div { 2 width: 180px; 3 height: 240px; 4 float: left; 5 margin: 0 10px 20px 10px; 6 text-align: center; 7 } 8 9 dl.thumbnail img { 10 border: 2px solid #bbb; 11 width: 120px; 12 height: 120px; 13 } 14 15 dl.thumbnail a { 16 display: block; 17 } 18 19 20 dl.thumbnail dd { 21 text-align: center; 22 margin-left: 0; 23 margin-top: 2px; 24 }
追記
ソースコード
<dl class="thumbnail clearfix"> <div> <dt> <a href="/uploads/clubmember//5eJJR77iIjQY2rlplYM8fus6nfHq4SyO.JPG"> <img src="/uploads/clubmember//5eJJR77iIjQY2rlplYM8fus6nfHq4SyOM.JPG"; data-tip="ID:639<br>投稿者:hatenai <br>カテゴリ:イベント<br>投稿日時:2017-08-23 16:11:34<br><br>コメント<br>12345678901234567890123456789012345678901234567890123456789012345678901234567890123456781234567890123456789012345678901234567890123456789012"> </a> </dt> <div>
のようになっていました
cssやjsのフレームワーク(phpは何か使ってそうですが)を使用しているのであればそちらも質問本文に追記願います。
cssやjsのフレームワークは特にフレームワークは使用していません
上記のHTML(PHP)は合っていますか? このままだと、data-tip属性が<img>タグに付いてしまい、文字列が表示されないような気がするのですが...
現状のソースコードのコピーさせていただきました。画像も現在の結果のスクリーンショットを添付させていただいています。
<dt>が閉じられてないのは転記漏れでしょうか?
この手の質問をするときはPHPのソースではなくHTMLに展開されたものを転記してください。回答者の環境では質問者さんの状況が確認できません
そもそもご提示のソースにdata-tipに対するcss指定がないように思いますが。。
[data-tip]{}を試したのですがどれもうまく行かず、元に戻した状態で質問させていただきました
失敗したソースも「やってみたこと」のうちと思いますし、ちょっとしたことで解決できるかもしれませんので、提示いただけると回答者にはヒントとなります。今いただいたソースだけではそもそもいただいた画像のような表示にならないので、ソースコードとの差異があります。
ブラウザで表示した時に、該当する箇所をデベロッパーツールの「要素を検証(調査)」か何かの機能で調べて、実際のHTML(DOMツリー)がどのような状態になっているかを確認することはできませんか? JavaScriptか何かでdata-tip属性の内容を読んで表示できるようにHTMLを操作している可能性があるのではと思うのですが。
回答2件
あなたの回答
tips
プレビュー