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

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

2610閲覧

css 文字の横幅に合わせて改行ができない

amaguri

総合スコア227

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2017/08/22 02:33

参考サイト

やりたいこと
マウスを乗せた時に表示される下記コードの部分を
参考サイトのように横幅指定と
word-break: normal;
を利用して改行したいのですがうまくいきません
どうすればよ横幅に合わせて改行できますでしょうか?

title="ID:<?php echo $value->id?><br>投稿者:<?php echo $value->club_member->nickname?> <br>投稿日時:<?php echo $value->created_at?><br><br>コメント<br><?php echo $value->body?>">

の部分したい

html

1<dl class="thumbnail clearfix"> 2 <div> 3 <dt> 4 <?php if ($value->img_id):?> 5 <a href="<?php echo $value->piy_img->getUrl("","")?>"><img src="<?php echo $value->img->getUrlM()?>"; 6 title="ID:<?php echo $value->id?><br>投稿者:<?php echo $value->club_member->nickname?> 7 <br>投稿日時:<?php echo $value->created_at?><br><br>コメント<br><?php echo $value->body?>"> 8 </a> 9 <?php endif?> 10 </dt> 11 <div> 12 <dd><?php echo date("Y年m月d日",strtotime($value->created_at)) ?></dd> 13 <dd><?php echo Html::anchor("admin/clubmember/show/".$value->club_member_id,$value->club_member->nickname)?></dd> 14 <dd><?php echo $value->house->name?></dd> 15 <dd> 16 <?php echo $value->getIsPiyStr()?> 17 <?php if (($value->approval_flag == "H") || ($value->approval_flag == "0") || ($value->approval_flag == "X") ):?> 18 <?php echo Form::checkbox("check[]",$key,in_array($key,$check),array('class' => 'list'))?> 19 <?php endif?> 20 </dd> 21 </div> 22 </div> 23</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 word-break: normal; 8 } 9 10 dl.thumbnail img { 11 border: 2px solid #bbb; 12 width: 120px; 13 height: 120px; 14 } 15 dl.thumbnail a { display: block; } 16 17 18 dl.thumbnail dd { 19 text-align: center; 20 margin-left: 0; 21 margin-top: 2px; 22 }

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

title属性の解釈はブラウザ依存であり、CSSなどでは制御できないと思います。
HTML5では、"LF"(U + 000A)で改行すると書いてあるだけです。表示すら保証されません。
https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes/title
https://www.w3.org/TR/html5/dom.html#the-title-attribute
仕様にある通り、この属性に依存することは推奨されません。

どうしても制御したい場合、title属性ではなくCSSやJavaScriptで実装することになるでしょう。

-- 追記
これで終わるのもなんなので、CSSでの例を挙げておきます。

HTML

1<a href="#" data-tip="あいうえおかきくけこさしすせそ">

CSS

1[data-tip]:not([title]):hover::after { 2 display: block; 3 content: attr(data-tip); 4 position: absolute; 5 padding: .4em; 6 border: 1px solid #333; 7 border-radius: .4em; 8 width: 10em; 9 word-break: normal; 10 background: #ffe; 11 color: #000; 12}

参考:
CSSだけでツールチップを実現する方法
http://so-zou.jp/web-app/tech/css/sample/tooltip.htm

シンプルなhtmlとcssのみでできるツールチップ
http://qiita.com/kazu69/items/6f911fb41e88505142c7

投稿2017/08/22 04:25

編集2017/08/22 04:55
x_x

総合スコア13749

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

amaguri

2017/08/22 05:14

ありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問