data-*属性にcssを実行したい

Question

<a>タグにて宣言した「data-tip」にcssにて
width:490px;
word-break: break-all;
を使用して折り返しを実装したいのですがうまくいきません。

画像のようになっています

<dl class="thumbnail clearfix">
    <div>
        <dt>
            <a href="<?php echo $value->piy_img->getUrl("","")?>">
                <img src="<?php echo $value->piy_img->getUrlM()?>";
                data-tip="ID：<?php echo $value->id?><br>投稿者:<?php echo $value->club_member->nickname?><br>カテゴリ：<?php echo $value->is_category_str()?>
                <br>投稿日時:<?php echo $value->created_at?><br><br>コメント<br><?php echo $value->body?>">
            </a>
    </div>
</dl>

    dl.thumbnail div {
        width: 180px;
        height: 240px;
        float: left;
        margin: 0 10px 20px 10px;
        text-align: center;
    }

    dl.thumbnail img {
        border: 2px solid #bbb;
        width: 120px;
        height: 120px;
    }

    dl.thumbnail a {
        display: block;
    }


    dl.thumbnail dd {
        text-align: center;
        margin-left: 0;
        margin-top: 2px;
    }

追記
ソースコード

<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>

のようになっていました

Comments

[m.ts10806]

cssやjsのフレームワーク（phpは何か使ってそうですが）を使用しているのであればそちらも質問本文に追記願います。

[amaguri]

cssやjsのフレームワークは特にフレームワークは使用していません

[othersight]

上記のHTML(PHP)は合っていますか? このままだと、data-tip属性が<img>タグに付いてしまい、文字列が表示されないような気がするのですが...

[amaguri]

現状のソースコードのコピーさせていただきました。画像も現在の結果のスクリーンショットを添付させていただいています。

[m.ts10806]

<dt>が閉じられてないのは転記漏れでしょうか？

[yambejp]

この手の質問をするときはPHPのソースではなくHTMLに展開されたものを転記してください。回答者の環境では質問者さんの状況が確認できません

[m.ts10806]

そもそもご提示のソースにdata-tipに対するcss指定がないように思いますが。。

[amaguri]

[data-tip]{}を試したのですがどれもうまく行かず、元に戻した状態で質問させていただきました

[m.ts10806]

失敗したソースも「やってみたこと」のうちと思いますし、ちょっとしたことで解決できるかもしれませんので、提示いただけると回答者にはヒントとなります。今いただいたソースだけではそもそもいただいた画像のような表示にならないので、ソースコードとの差異があります。

[othersight]

ブラウザで表示した時に、該当する箇所をデベロッパーツールの「要素を検証(調査)」か何かの機能で調べて、実際のHTML(DOMツリー)がどのような状態になっているかを確認することはできませんか? JavaScriptか何かでdata-tip属性の内容を読んで表示できるようにHTMLを操作している可能性があるのではと思うのですが。

Answer 1

普通imgタグのdata-*は何を書いても表示されることはありません。
きっとdata-tipを利用してテキスト表示するような別のライブラリをご利用なのでは？
そのライブラリが吐き出すHTMLに適用するようなCSSを書けばいいのかと。

ただ半角英数字の羅列はword-wrapできるようになったとは言え
もともと改行に適さない文字列なので運用を再検討したほうがよいかもしれません

Comments

[amaguri]

なるほど。。運用を考えて見たいと思います。

Answer 2

他の方も指摘されているようにタグがちょいちょいおかしいですが、
以下のCSSで枠内で自動改行するようになります。

dl.thumbnail a {
  display: block;
  word-wrap: break-word; <- 追加
}

https://jsfiddle.net/takmatz/bzuc0cjj/

Comments

[amaguri]

試して見たのですが解決しませんでした。。