#実現したいこと
LINEの吹き出しのように、文字数に合わせて"綺麗に"自動的にテキストを折り返したいです。
条件
・ボックスの最大横幅は固定する(下のコードでは150pxにしています)
・文が一行で入らない場合は改行するが、文字の左右の余白(10px)が均等になるようにする
・日本語でも英語でも同様の動作である
これを実装しようと思い次のコードを作成しました。
#作成したコード
html
1<!doctype html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8" /> 5 <title>test</title> 6 <style> 7 .back { 8 position: relative; 9 display: inline-block; 10 background-color: lightcoral; 11 width: 250px; 12 height: 100px; 13 font-size: 16px; 14 } 15 16 .box { 17 position: absolute; 18 background-color: whitesmoke; 19 padding: 0px 10px; 20 margin: 0px; 21 border: 1px solid darkgray; 22 border-radius: 5px; 23 max-width: 150px; 24 top: 10px; 25 left: 10px; 26 } 27 </style> 28</head> 29 <body> 30 <div class="back"> 31 <!-- これは4枚目の写真の場合です --> 32 <div class="box">aaaaaaaaaaaaaaaa<br>aaaa</div> 33 </div> 34 </body> 35</html>
文字数が多くなると自動で改行してくれましたが、余白のバランスがおかしくなってしまいます。この余白を左右常に10pxになるように設定したいです。
半角文字を続けて入力した場合、はみ出してしまいます。
これを次のように自動でなるように設定したいです(上のコードにありますが、手動で<br>を入れてスクリーンショットしました)。
どのようにすれば条件の通りに実装できるか教えて頂ければ幸いです。
どうぞよろしくお願い致します。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/01/09 12:55
2019/01/09 13:26 編集
2019/01/09 13:36
2019/01/09 13:58
2019/01/09 14:30
2019/01/09 14:57
2019/01/09 15:03