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

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

ただいまの
回答率

89.13%

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

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 1,055

amaguri

score 219

参考サイト

やりたいこと
マウスを乗せた時に表示される下記コードの部分を
参考サイトのように横幅指定と
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?>">


の部分したい

<dl class="thumbnail clearfix">
    <div>
        <dt>
            <?php if ($value->img_id):?>
            <a href="<?php echo $value->piy_img->getUrl("","")?>"><img src="<?php echo $value->img->getUrlM()?>";
               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?>">
            </a>
            <?php endif?>
        </dt>
        <div>
            <dd><?php echo date("Y年m月d日",strtotime($value->created_at)) ?></dd>
            <dd><?php echo Html::anchor("admin/clubmember/show/".$value->club_member_id,$value->club_member->nickname)?></dd>
            <dd><?php echo $value->house->name?></dd>
            <dd>
                <?php echo $value->getIsPiyStr()?>
                <?php if (($value->approval_flag == "H") || ($value->approval_flag == "0") || ($value->approval_flag == "X") ):?>
                    <?php echo Form::checkbox("check[]",$key,in_array($key,$check),array('class' => 'list'))?>
                <?php endif?>
            </dd>
        </div>
    </div>
</dl>
    dl.thumbnail div {
        width: 180px;
        height: 240px;
        float: left;
        margin: 0 10px 20px 10px;
        text-align: center;
        word-break: normal;
    }

    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;
    }
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+2

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での例を挙げておきます。

<a href="#" data-tip="あいうえおかきくけこさしすせそ">
[data-tip]:not([title]):hover::after {
  display: block;
  content: attr(data-tip);
  position: absolute;
  padding: .4em;
  border: 1px solid #333;
  border-radius: .4em;
  width: 10em;
  word-break: normal;
  background: #ffe;
  color: #000;
}

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

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/08/22 14:14

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

    キャンセル

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

  • ただいまの回答率 89.13%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる