文字数制限と横幅について

このQ&Aのポイント
  • 横幅の設定についての質問です。$val['aaa']はDBから取得され、160pxの横幅で表示されます。しかし、文字数が30文字を超える場合は、あああのように改行されますが、111のように改行されない問題が発生しています。改行されない方法はありますか?
  • $val['aaa']はDBから取得され、160pxの横幅で表示されます。しかし、30文字以上の場合は改行されず、横幅を無視して表示されます。改行されない方法はありますか?
  • 横幅の設定についての質問です。$val['aaa']はDBから取得され、160pxの横幅で表示されます。しかし、30文字以上の場合は改行されず、横幅を無視して表示されます。改行されない方法はありますか?
回答を見る
  • ベストアンサー

文字数制限と横幅について

横幅の設定についての質問です。 下記のように設定しています。 $val['aaa'] はDBより、foreachでまわしています。 たとえば、下記のような111...とあああ...の場合、 あああの場合は、width:160pxで改行されます。 が、111の場合は改行されずに、160pxを無視してしまいます。 無視しない方法はありますでしょうか? $val['aaa'] = mb_strimwidth($val['aaa'], 0, 30, "...", 'UTF-8'); <div style="width:160px;"> <a href="./pop.php>111111111111111111111111111111 </a> </div> <div style="width:160px;"> <a href="./pop.php>ああああああああああああああああ</a> </div> よろしくお願いします。

  • PHP
  • 回答数2
  • ありがとう数3

質問者が選んだベストアンサー

  • ベストアンサー
  • shimix
  • ベストアンサー率54% (865/1590)
回答No.1

それはphpではなくhtml・cssの問題ですね。 途中に空白のない英数字の羅列は「ひとつ英単語」として扱われますので改行されません。適度に<wbr>を挟むなどしないとダメでしょう。そういう文字列が実運用で発生するならば。という前提ですが(実運用では空白は入らない英数字の羅列はなかなかあり得ないので)。

a-----n
質問者

お礼

ご連絡ありがとうございます。 先ほどの質問にも回答していただいてありがとうございます。 先ほどからベストアンサーのお礼が登録されないようです。 ここから失礼します。 ひとつの英単語として扱われるのですね。。 ありがとうございます。 それなら仕方ないですね。 助かりました。 またよろしくお願いします。

その他の回答 (1)

  • 1minn
  • ベストアンサー率57% (52/90)
回答No.2

前の質問は、お礼も補足も何もなし。 あきらかに前の質問と関連している内容を再投稿。 さすがにこれは、回答してくれている方に失礼だと思いますが? あと今回の質問はカテ違いですよね? すでにPHPではなくHTMLやCSSの問題です。 一応回答しときます。 掲題の状態はブラウザのバグ(仕様)です。 IEであればIE独自解釈のword-breakなどで対応できると思いますが、Firefoxなどは対応していませんのでこじつけのような処理を入れたり、スマートではない対応が必要になってしまいます。

a-----n
質問者

お礼

お礼を登録しても登録できないときがたまにあります。

関連するQ&A

  • 文字数制限について

    文字数制限について教えてください。 下記のようにPHPで設定しているのですが、 全部数字を入れた場合、日本語よりもかなりオーバーしてしまいます。 バイト数が違うからだと思いますが、 日本語と同じ幅で表示する方法はありますか? $val['aaa'] = mb_strimwidth($val['aaa'], 0, 84, "...", 'UTF-8'); 現在 あああ 111 ↓ 希望 あああ 111111 よろしくお願いします。

    • ベストアンサー
    • PHP
  • 初歩的かもしれませんが回り込みが上手くできません

    初歩的かもしれませんが回り込みが上手くできません イメージ的には、図のようなdivを4つ横に並べて改行、同じように繰り返したいです。 ■■■■ ■■■■ しかし、下記の様にすれば ■■■ ■ ■■■ ■ に、なってしまいます。 こういう場合、どうすればいいのでしょうか?? <div class="sample" style=" width:120px; float:left;"><a href="http://okwave.jp" target="_blank"><img src="okwave.png" height="80" width="120"><br>okwave1</a></div> <div class="sample" style=" width:120px; float:left;"><a href="http://okwave.jp" target="_blank"><img src="okwave.png" height="80" width="120"><br>okwave2</a></div> <div class="sample" style=" width:120px; float:left;"><a href="http://okwave.jp" target="_blank"><img src="okwave.png" height="80" width="120"><br>okwave3</a></div> <div class="sample" style=" width:120px; "><a href="http://okwave.jp" target="_blank"><img src="okwave.png" height="80" width="120"><br>okwave4</a></div> <div class="sample" style=" width:120px; float:left;"><a href="http://okwave.jp" target="_blank"><img src="okwave.png" height="80" width="120"><br>okwave5</a></div> <div class="sample" style=" width:120px; float:left;"><a href="http://okwave.jp" target="_blank"><img src="okwave.png" height="80" width="120"><br>okwave6</a></div> <div class="sample" style=" width:120px; float:left;"><a href="http://okwave.jp" target="_blank"><img src="okwave.png" height="80" width="120"><br>okwave7</a></div> <div class="sample" style=" width:120px; "><a href="http://okwave.jp" target="_blank"><img src="okwave.png" height="80" width="120"><br>okwave8</a></div>

    • ベストアンサー
    • CSS
  • <ul>から</ul>の間をjavascriptで

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> </head> <body> <div id="images"> <ul> <li style="width: 354px"><a href="javascript:;">ああ</a></li> <li style="width: 354px"><a href="javascript:;">いい</a></li> <li style="width: 354px"><a href="javascript:;">うう</a></li> <li style="width: 354px"><a href="javascript:;">ええ</a></li> </ul> </div> </body> </html> の<ul>から</ul>の間の<li></li>を1個にしたり5個にしたり、<ul>から</ul>を無くしたり javascriptで動的に変更するスプリクトが知りたいです。

  • IE6,7で画像の上に載せた文字がずれる

    HTMLなのですが、 画像が縦に3つつながって1つの画像のようになった状態で表示しようとしています。 さらに上と下の画像にはテキストを上にかぶせて表示します。 画像全体にリンクを貼ってあります。 下記のようなコードで作成した所、IE6,7でのみ、下記のバグが出てしまいました。 ・画像とテキストの縦位置のズレ ・画像間に2px程度の空白が生じる ・画像に設定したリンクが開かない 大変困っています。 どなたか原因と修正方法を教えていただけますでしょうか。 <a href="test.html"> <div style="position: relative; width: 183px; height: 265px; "> <img src="images/top.jpg" width="183" height="36" /> <div style="position: absolute; top: -11px; left: 55px;" class="font16b"> <p align="center">text1</p> </div> <img src="images/main.jpg" width="183" height="193" border="0" /> <img src="images/bottom.jpg" width="183" height="36" /> <div style="position: absolute; top: 218px; left: 4px; width: 181px;" class="font13"> <p align="left">text2</p> </div> </div> </a>

    • ベストアンサー
    • CSS
  • トップページの横幅を画面いっぱいに表示させたい。

    トップページの横幅を画面いっぱいに表示させたいのですが、イメージ画像を張り付けた上部は画面いっぱいに表示しますが、下のナビ部分のバックカラーが右に広く白場が出来てしまいます。flotを使っているためなのか…。 色々試してみたのですがどうしてもできません。 よろしくお願いします。 <body> <div class="back_color"> <div class="wrapper"> <p> <img src="images/xxx.jpg" width="1200" height="510" ></p> </div><!-- / .wrapper --> </div><!-- / .back_color --> <div class="back_color2"> <div id="nav"> <ul> <li id="top"><a href="index.html"><span>top</span></a></li> <li id="profile"><a href="profile.html"><span>profile</span></a></li> <li id="audition"><a href="audition2.html"><span>audition</span></a></li> <li id="news"><a href="news.html"><span>news</span></a></li> <li id="contact"><a href="mail.html"><span>mail</span></a></li> <li id="link"><a href="link.html"><span>link</span></a></li> </ul> </div><!-- / #nav --> <p style="color:#FFFFFF; font-size:12px; text-align:center; margin-top:60px; ">00000000000000</p> </div><!-- / .back_color2 --> </body> .wrapper { padding: 0px; height: auto; width: 1200px; margin-left:auto; margin-right:auto; } .back_color { background-color: #231a5f; width: 100%; height: 510px; } .back_color2 { background-color: #000000; width: 100%; height:150px; padding-top: 35px; padding-bottom: 35px; border-top-width: 1px; border-top-style: solid; border-top-color: #FFFFFF; margin-left:auto; margin-right:auto; } #nav { width:730px; height:30px; background-color: #000000; margin-left:auto; margin-right:auto; } #nav ul { line-height: 0; } #nav ul li { float: left; border-left-width: 1px; border-left-style: solid; border-left-color: #FFFFFF; } #nav ul li a { display: block; text-decoration: none; width:90px; height:30px; margin-left:15px; margin-right:15px; } #nav ul li a span { position: absolute; width: 0; height: 0; overflow: hidden; }

    • 締切済み
    • CSS
  • HTML、floatでのscrolバーの出現の有無

    HTMLについて質問させていただきます。 <body> <div id="oowaku"> <div id="main"> <div id="a" style="float:left; width:500px;"> <div id="b" style="float:right; width:200px;"> </div> </div> </body> (スペルミス等があった場合無視してください。) (この時、aとbの間には隙間が仮に300pxあるとします。(ブラウザの幅1000px)) (mainのwidthを指定しない場合widthは100%指定に自動でなっていると思います。) ここで、ブラウザの右端を左に向かって縮めると、 mainのwidthを ・px指定した時は、「aとbは位置固定」で、px指定したところまで縮み、pxより短くなるとスクロールバーに変わります。 ・%指定の時は、aとbの間の距離はブラウザーの横幅に合わせて、詰めてくれます。 しかし、%指定の時、aとbの合わせたwidthより、ブラウザの幅が短くなると、bはaの下に改行?されてしまいます。そしてaのpxより短くなって初めてスクロールバーに変わります。 後者の%指定(aとbの距離をブラウザの幅で詰めてくれる)でかつ、aとbの距離が無くなった時に改行?されることなく、スクロールバーにする方法はないでしょうか。 回答よろしくお願いします。

    • ベストアンサー
    • HTML
  • display blockできません

    初めまして、現在左側の5段メニューボタンを作成中なのですが、 テキストで書いたリンクの文字が出てきたり、 display blockできなかったり、 IEでは5段積みでも、firefoxではつぶれた5段積みで 表示されてしまいます。 私のCSSの書き方がおかしいのでしょうか? どなたかご指導をお願い致します。宜しくお願い致します。 html <div id="left"> <div class="left_style6"> <p><a href="##.htm">aaa</a></p> </div> <div class="left_style7"> <p><a href="##.htm">bbb</a></p> </div> <div class="left_style8"> <p><a href="##.htm">ccc</a></p> </div> <div class="left_style9"> <p><a href="##.htm">ddd</a></p> </div> <div class="left_style10"> <p><a href="##.htm">eee</a></p> </div></div> css .left_style6 { background: url(img/aaa.gif) no-repeat; width : 170px; height : 30px;} .left_style6 p a { margin: 1px 0 0 5px ; display : block; } .left_style7 { background: url(img/bbb.gif) no-repeat; width : 170px; height : 30px;} .left_style7 p a { margin: 1px 0 0 5px ; display : block; } .left_style8 { background: url(img/ccc.gif) no-repeat; width : 170px; height : 30px;} .left_style8 p a { margin: 1px 0 0 5px ; display : block; } .left_style9 { background: url(img/ddd.gif) no-repeat; width : 170px; height : 30px;} .left_style9 p a { margin: 1px 0 0 5px ; display : block; } .left_style10 { background: url(img/eee.gif) no-repeat; width : 170px; height : 30px;} .left_style10 p a { margin: 1px 0 0 5px ; display : block; }

    • ベストアンサー
    • CSS
  • ★CSS★

    CSSについて質問です。 firefoxでは下記を記載し、たてよこの真ん中に表示することができました。 IEではセンターにすることはできましたが、ミドルにすることができませんでした。 display:table-cell; が効かないのでしょうか? IEでもミドルにできる方法を教えてください。 .imgs{ display:table-cell; height: 160px; width: 160px; text-align:center; vertical-align:middle; } <div class="imgs"> <a class="aaa" href="./pop.php> <img class="imgtf" id="imgtf" alt="タイトル" src="images/thumbnail/eee.jpg"> </a> </div> よろしくお願いします。

    • ベストアンサー
    • CSS
  • liタグのナビボタンがFirefoxで二重に表示。

    liタグでナビボタンを縦に3つ積みたいのですが、IEでは正しく表示しますが、何故かFirefoxでは2段めから2つずつ表示してしまい5つのナビボタンになってしまいます。どのように記述すれば良いのでしょう? <div id="sidebar"> <ul> <li id="aaa"><a href=""><span>aaa</span></li> <li id="bbb"><a href=""><span>bbb</span></li> <li id="ccc"><a href=""><span>ccc</span></li> </ul> </div> div#sidebar { width: 245px; float:left; border-right-width: 1px; border-right-style: solid; border-right-color: #CCCCCC; } div#sidebar ul li a { display: block; } div#sidebar ul li a span { position:absolute; width: 0; height: 0; overflow:hidden; } ul li#aaa a { width: 245px; height: 60px; background-image:url(image/aa.jpg); background-position: 10px 20px; background-repeat: no-repeat; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #999999; } ul li#bbb a { width: 245px; height: 60px; background-image:url(image/bb.jpg); background-position: 10px 20px; background-repeat: no-repeat; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #999999; } ul li#ccc a { width: 245px; height: 60px; background-image:url(image/cc.jpg); background-position: 10px 20px; background-repeat: no-repeat; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #999999; }

    • ベストアンサー
    • CSS
  • Layerの中にあるリンクがmacで動作しません

    以下が友達に質問されたソースを簡略化した物です。layerを左右2段組みにしてますが、右のlayer内が全く反応しません。layerを使わなければできるのですが、この方法のどこが間違っているかが教えられなくて質問しました。よろしくお願い致します。 javascript~window.open省略 <DIV style="top : 61px; left : 356px; position : absolute; z-index : 1; width: 331px; height: 40px;" id="Layer2"> <DIV> <TABLE border="1" width="331" height="40"> <TBODY> <TR> <TD width="61" height="20">サンプル2</TD> <TD width="214"><A href="#">◆</A></TD> </TR> </TBODY> </TABLE> </DIV> </DIV> <DIV style="top : 61px;left : 24px; position : absolute; z-index : 3; " id="Layer5"> <DIV> <TABLE border="1" width="313" height="40"> <TBODY> <TR> <TD width="134" height="16">サンプル</TD> <TD width="141"><A href="#">◆</A> </TD> </TR> </TBODY> </TABLE> </DIV> </DIV>

    • ベストアンサー
    • HTML

専門家に質問してみよう