data-label 内で改行したい

data-label 内で改行したいのですが、何か方法はないでしょうか？
htmlでもjsでもcssでも構いません。とにかく改行したいです。

■現在の状況
<HTML側>

<td data-label="ああああ<br>いいい">
～
</td>

<CSS側>

td::before {
content: attr(data-label);
}

単純にこの方法は<br>がそのまま表示されるので無理でした。

2019/02/28 01:55

>htmlでもjsでもcssでも構いません jsでのアプローチは何か試されましたか？

2019/02/28 01:59

「data-label 内で改行」というのもどのような結果を望まれているのか分かりません。図示いただければと。

2019/02/28 02:00

ちなみに必ず<br>と入っているものなのでしょうか。要件や仕様も具体的に記載してください。

行動規範の内容に同意します

回答1件

ベストアンサー

実用性はかなり乏しい（ソースの見栄えが致命的に悪くなる）ですが、こんな方法はあります。

html
1<style>
2td::before {
3content: attr(data-label);
4white-space: pre
5}
6</style>
7
8<!-- data-labelの途中で改行を入れる -->
9<td data-label="a
10b"></td>

投稿2019/02/28 01:58

総合スコア146592

2019/02/28 02:17 編集

実際に改行するよりは「
」の方がよいかもしれません data-label="ああああ
いいい"

2019/02/28 02:29

maisumakunさんとyambejpのを組み合わせたら理想的な形になりました！ 
を入れていたのですがなぜか改行されなかったので、td::beforeにwhite-space: preをいれたところ改行されました。ありがとうございます！

2019/02/28 02:40

説明がたりなくてすみません、maisumakunさんのベースに改行マークを「
」にしてください・・・という意図でした結果的にはそのとおり対応いただいているので問題ありません

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.31%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問をすることでしか得られない、回答やアドバイスがある。