実現したいこと
現在、phpでURLとタイトル、スクリーンショット画像を取得し、出力しようとしています。しかし、flexboxを使用した際に、コンテナ内で出力している文字列が長くなった場合折り返さず、コンテナの枠を通り越して出力されます。
該当のソースコード
php
1<html lang="ja">2 3<head>4 <meta charset="utf-8">5 <title>スクリーンショット</title>6 <meta name="description" content="スクリーンショット">7 <meta name="viewport" content="width=device-width, initial-scale=1.0">8 <link rel="stylesheet" href="./style.css">9 <!-- [if lt IE 9] -->10 <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>11 <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>12 <!-- [endif] -->13 <script src="main.js"></script>14</head>15 16<body>17 <div class="flexline px4">18 <div class="left"> 19 <div class="type1">20 [URL]<br>21 aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 22 </div>23 <div>24 [Domain]<br>25 iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii 26 </div>27 <div>28 [タイトル]<br>29 uuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu 30 </div>31 </div>32 <div class="right">33 <div class="type1">34 スクリーンショット 35 <a href="./ss/<?php echo $output_sanitizedurl?>_big_screenshot.png" target="_blank" >36 <img src="./ss/<?php echo $output_sanitizedurl?>_small_screenshot.png" width="100%">37 </a>38 </div>39 </div>40 </div>41 42 43</body>44 45</html>
style.css
1body{ 2 background-color: rgb(219, 243, 223); 3} 4 5.center { 6 text-align:center 7 } 8 9.px1{ 10 font-size: 40px; 11 } 12 13.px2{ 14 font-size: 70px; 15 } 16 17.px3{ 18 font-size: 25px; 19 } 20 21.px4{ 22 font-size: 30px; 23 } 24 25.flexline{ 26 display: flex; 27 } 28 29.flex-item{ 30 word-wrap: break-word; /* テキストがコンテナの枠を超えた場合に折り返す */ 31} 32 33.left { 34 width: 70%; 35 margin: 5px; 36 /*background-color: rgb(219, 243, 223);*/ 37 background-color: rgb(252, 252, 252); 38 border-radius: 15px; 39 } 40 41.right { 42 width: 30%; 43 margin: 5px; 44 /*background-color: rgb(219, 243, 223);*/ 45 background-color: rgb(252, 252, 252); 46 border-radius: 15px; 47 } 48 49.type1{ 50 margin: 10px 10px; 51} 52 53.type2{ 54 margin: 10px 10px; 55}
試したこと
折り返す方法を色々調べてみて、break-wordやwrapなど試してみたのですが、厳しかったです。お手数おかけしますが、何卒宜しくお願い致します。
0 コメント